Remplissage entre l'icône d'accueil et le titre d'ActionBar

110

Quelqu'un sait-il comment définir le remplissage entre l'icône d'accueil de l'ActionBar et le titre?

Alesqui
la source
13
Bienvenue dans le monde des hacks: Android . Cette chose simple aurait dû être trouvée par n'importe qui (même un débutant) si nous en avons besoin dans d'autres technologies d'interface utilisateur et la programmation d'applications. Cependant, sous Android, c'est vraiment mystérieux. Ils cachent intentionnellement la fonctionnalité, la rendent compliquée et simplement pour faire d'Android un monde de hacks . Je ne sais pas quel est leur but final.
King King
1
Cette question et réponses cèdent la place pour y parvenir avec des attributs dans la barre d'outils (support v7)
Elisabeth
Android est encore plus nul que iOS.
Borzh

Réponses:

69

J'ai adapté la réponse de Cliffus et assigné le logo-drawable dans ma définition de style de barre d'action, par exemple comme ceci dans res / style.xml:

<item name="android:actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#3f51b5</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleText</item>
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">18sp</item>
        <item name="android:logo">@drawable/actionbar_space_between_icon_and_title</item>
</style>

Le dessinable ressemble à celui de Cliffus (ici avec l'icône du lanceur d'application par défaut) dans res / drawable / actionbar_space_between_icon_and_title.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_launcher"
        android:right="20dp"/>
</layer-list>

Dans le fichier android_manifest.xml, vous pouvez toujours définir une icône d'application différente (icône du lanceur sur le «bureau». Toute définition de logo différente ici est visible dans les activités sans barre d'action.

Minsky
la source
pourquoi il ne prend pas d'effets sur Android 5.1
Logan Guo
Désolée, je ne peux rien dire à ce sujet dans la version 5.1. Je suis passé au contrôle de la barre d'outils plus flexible. Si ce n'est déjà fait, je vous recommande d'ouvrir une nouvelle question ici sur StackOverflow et d'écrire quelques détails supplémentaires, ce qui a fonctionné pour vous (<5.1) et ce qui ne fonctionne pas et ce que vous avez essayé avec 5.1, mais vous n'avez pas trouvé de solution.
Minsky
Merci @Minsky, je me suis inspiré de votre réponse pour résoudre mon problème, je mets comment dans la réponse ci-dessous :)
Contexte
Et si utilisé mipmap?
Yura Shinkarev
100

EDIT : assurez-vous de définir ce dessinable en tant que LOGO , et non en tant qu'icône de votre application, comme l'ont fait certains commentateurs.

Créez simplement un XML dessinable et placez-le dans le dossier de ressources "drawable" (sans aucune densité ni autre configuration).

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/my_logo"
        android:right="10dp"/>


</layer-list>

La dernière étape consiste à définir ce nouveau dessinable comme logo dans votre manifeste (ou sur l'objet Actionbar de votre activité)

Bonne chance!

Cliffus
la source
1
Il y a un gros problème ici avec cette solution. Je l'ai utilisé et @Alesqui a raison - l'icône de l'application a changé et est devenue plus petite ... Vous pouvez changer d'icône, mais comme dp est différent pour différents téléphones, cette solution ne le coupe pas dans une application de production.
Johan S
3
assurez-vous que vous définissez ce dessinable comme LOGO, pas comme icône d'application. bonne chance!
Cliffus
1
Je vois aussi une distorsion. Si j'applique un remplissage à droite comme ci-dessus, le côté droit de l'image est rogné.
Neil
1
Solution intéressante mais ne fonctionne pas pour moi - je peux soit ajouter un rembourrage supplémentaire de cette façon, soit recadrer l'image du logo - pas bon (4.3)
Dori
1
@Cliffus - belle solution. Mon exigence était de prendre le logo à gauche donc j'ai utilisé: android: left = "- 4dp".
TharakaNirmana
55

J'ai également rencontré un problème similaire, dans mon cas, je devais définir des titres de manière dynamique sur chaque activité en fonction du contenu.

Donc cela a fonctionné pour moi.

actionBar.setTitle("  " + yourActivityTitle);

Si tout ce que vous voulez, c'est l'espacement, c'est la solution la plus simple à laquelle je puisse penser.

Rahul Sainani
la source
13
Pourquoi voter contre? Ne pensez pas que c'est une mauvaise réponse, juste une autre façon de le faire.
Rahul Sainani
3
@idratherbeintheair Oui, je suis d'accord que ce n'est pas le moyen le plus "propre", alors maintenant, il ne dit que le plus simple. Mais lorsque vous signalez quelque chose, veuillez poster une solution alternative. J'ai rencontré ce problème et c'est ce que j'ai utilisé dans mon application, alors j'ai partagé.
Rahul Sainani
3
Vraiment? Cette solution peut ne pas fonctionner de la même manière sur différents écrans avec différents DPI.
Roman Bugaian
5
Je ne choisirai pas cette solution car j'ai vraiment besoin de quelque chose de plus stable dans mon application, mais je veux demander à tous ces gens qui disent "Ce n'est pas propre". Oh, mon Dieu, où est la solution PROPRE pour ce problème? Tous ces hacks avec des logos, setPadding ne me semblent pas propres non plus! Lisez simplement les commentaires, combien de personnes ont des problèmes avec ceux-ci aussi. Réglage android: paddingLeft sur le titre - ce qui serait CLEAN si cela avait fonctionné. Nous sommes laissés ici dans le noir pour inventer des hacks parce que, pour une raison quelconque, cela ne fonctionne tout simplement pas comme il aurait dû fonctionner. Donc rien n'est "pas propre".
Varvara Kalinina
1
Une solution plus propre serait d'utiliser l' app:titleMarginStartattribut dans le XML de mise en page.
LarsH
40

C'est ainsi que j'ai pu définir le remplissage entre l'icône d'accueil et le titre.

ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);

Je n'ai pas trouvé de moyen de personnaliser cela via les styles xml ActionBar. Autrement dit, le XML suivant ne fonctionne pas:

<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">        
    <item name="android:titleTextStyle">@style/ActionBarTitle</item>
    <item name="android:icon">@drawable/ic_action_home</item>        
</style>

<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingLeft">12dp</item>   <!-- Can't get this padding to work :( -->
</style>

Cependant, si vous cherchez à atteindre cet objectif via xml, ces deux liens peuvent vous aider à trouver une solution:

https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

(Il s'agit de la disposition réelle utilisée pour afficher l'icône d'accueil dans une barre d'action) https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml

Dushyanth
la source
1
@Dushyanth je viens d'essayer mais dit une exception de pointeur nul sur imageview. J'ai à la fois homeUpIndicator et l'icône d'accueil dans la barre d'action.
Krishna Shrestha
1
Cela ne fonctionne que pour l'API> = 11 car android.R.id.home a été introduit dans l'API 11. J'utilise actionbarcompat pour avoir une barre d'action également sur les appareils pré-Honeycomp. Comment y faire face?
tobias
Un petit hack. Voir la réponse de Cliffus ci-dessous pour une solution plus propre.
dhaag23
l'espacement d'origine n'est plus défini en utilisant padding, il semble utiliser marginEnddepuis l'api 17 - ce qui cassera probablement cette solution. Voir le mien ci
Dori
@tobias R.id.home est toujours là, même avant le niveau 11, il n'est tout simplement pas disponible
oscarthecat
32

Il s'agit d'une question courante dans la conception de matériaux, car vous souhaiterez peut-être aligner le titre de votre barre d'outils avec le contenu du fragment ci-dessous. Pour ce faire, vous pouvez remplacer le remplissage par défaut de "12dp" en utilisant l'attribut contentInsetStart = "72dp" dans votre mise en page toolbar.xml comme indiqué ci-dessous

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/app_theme_color"
    app:contentInsetStart="72dp"/>

Puis dans votre activité, appelez

Toolbar toolbar = (Toolbar) activity.findViewById(R.id.toolbar);
toolbar.setTitle("Title Goes Here");

Et vous vous retrouvez avec ceci:

Barre d'outils

themichaelscott
la source
Cela ne fonctionne pas du tout dans mon cas. S'il vous plaît laissez-moi savoir le style défini pour l'activité
Nitin Mesta
11
C'est la bonne manière de procéder. Il y a aussi app:titleMarginStart="dimension"pour cibler le titre directement.
Markus Rubey
Pensez que pour la plupart des utilisateurs, ce sera la «bonne» réponse. Fonctionne comme un charme, merci!
Taras le
1
En quoi est-ce la «bonne» réponse, si la question portait sur le remplissage entre l'icône d'accueil et le titre? L'icône d'accueil n'est pas mentionnée ici (ni le logo ni aucune variante). Si contentInsetStartmet un espace entre l'icône d'accueil et le titre, la réponse pourrait au moins le dire. Mon test tout à l'heure avec contentInsetStartsemblait mettre l'espace avant le logo (ce qui n'est certes pas le même que l'icône d'accueil).
LarsH
30

Pour moi, seule la combinaison suivante a fonctionné, testée de l'API 18 à 24

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"

où dans "app" se trouve: xmlns:app="http://schemas.android.com/apk/res-auto"

par exemple.

 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/SE_Life_Green"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                >
                .......
                .......
                .......
            </android.support.v7.widget.Toolbar>
Ajit
la source
1
Merci beaucoup. @Ajit
shahid17june
1
Génial. Ce serait mieux si vous pouvez fournir l'exemple de XML associé pour clarifier où mettre cela. (Je sais où mettre cette ligne)
John Pang
Bonjour @JohnPang, vous pouvez le mettre dans la barre d'outils de votre mise en page comme indiqué ci-dessus.
Ajit
29

Si vous utilisez la barre d'outils d'AppCompat (android.support.v7.widget.Toolbar,> = révision 24, juin 2016), le remplissage entre l'icône et le titre peut être modifié avec la valeur suivante:

  app:contentInsetStartWithNavigation="0dp"

Pour améliorer ma réponse, vous pouvez l'utiliser sur votre barre d'outils directement dans votre activité ou vous pouvez créer un nouveau fichier de mise en page pour votre barre d'outils. Dans ce cas, il vous suffit d'importer @id de votre barre d'outils en utilisant la propriété include sur chaque vue nécessaire.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>

Vous pouvez ensuite importer votre mise en page sur votre activity.xml

<include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
tryp
la source
Génial. Ce serait mieux si vous pouvez fournir l'exemple de XML associé pour clarifier où mettre cela. (Je sais où mettre cette ligne)
John Pang
@JohnPang j'ai détaillé ma réponse, j'espère que cela vous aidera à comprendre comment utiliser cette propriété.
tryp
@ Bolein95 utilisez-vous la bibliothèque de support? pour pouvoir vous aider, veuillez fournir plus d'informations.
tryp le
A noter que ce paramètre a été introduit dans la version 24 de la bibliothèque de conception. Donc, si vous êtes coincé dans l'éclipse à la version 23 (comme je le faisais jusqu'à hier ...), vous n'y aurez pas accès.
FlorianT
@FloriantT merci pour la précision, j'ai mis à jour ma réponse concernant votre commentaire.
tryp
6

Utiliser des titleMarginStartœuvres pour moi. Exemple Xamarin:

<android.support.v7.widget.Toolbar
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:titleMarginStart="24dp"/>

Définissez le logo comme ceci:

mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";
Druide
la source
Tu es un génie. +1
Jacob Sánchez
4

J'ai utilisé \ t avant le titre et j'ai travaillé pour moi.

Zanini
la source
2

J'utilise une image personnalisée au lieu du texte du titre par défaut à droite du logo de mes applications. Ceci est configuré par programme comme

    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setCustomView(R.layout.include_ab_txt_logo);
    actionBar.setDisplayShowCustomEnabled(true);

Les problèmes avec les réponses ci-dessus pour moi sont que la suggestion de @ Cliffus ne fonctionne pas pour moi en raison des problèmes que d'autres ont décrits dans les commentaires et bien que le paramètre de remplissage programmatique @dushyanth ait fonctionné dans le passé, je pense que le fait que l'espacement est maintenant défini en utilisant android:layout_marginEnd="8dip" depuis l'API 17 la configuration manuelle du remplissage ne devrait avoir aucun effet. Voir le lien qu'il a posté sur git pour vérifier son état actuel.

Une solution simple pour moi est de définir une marge négative sur ma vue personnalisée dans la barre d'action, comme ceci android:layout_marginLeft="-14dp". Un test rapide montre que cela fonctionne pour moi sur 2.3.3 et 4.3 en utilisantActionBarCompat

J'espère que cela aide quelqu'un!

Dori
la source
@Diri pouvez-vous ajouter plus pouvons-nous créer une barre d'action en haut, en bas, à gauche, à droite
Amitsharma
@amitsharma - je ne sais pas ce que vous voulez dire exactement - voulez-vous dire déplacer la barre d'action depuis le haut de l'écran? Si tel est le cas, je pense que vous auriez besoin de créer une vue de barre d'action personnalisée pour ce faire - il semble que ce ne soit peut-être pas bon ux :)
Dori
dans ce cas, je ne sais pas ce que vous entendez par "pouvez-vous ajouter plus, pouvons-nous créer une barre d'action en haut, en bas, à gauche, à droite"
Dori
2

J'ai résolu ce problème en utilisant une disposition de navigation personnalisée

En l'utilisant, vous pouvez personnaliser n'importe quoi dans le titre sur la barre d'action:

build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:21.0.+'
    ...
}

AndroidManifest.xml

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name">
        <activity
            android:name=".MainActivity"
            android:theme="@style/ThemeName">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

styles.xml

<style name="ThemeName" parent="Theme.AppCompat.Light">
   <item name="actionBarStyle">@style/ActionBar</item>
   <item name="android:actionBarStyle" tools:ignore="NewApi">@style/ActionBar</item>

<style name="ActionBar" parent="Widget.AppCompat.ActionBar">
   <item name="displayOptions">showCustom</item>
   <item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>

    <item name="customNavigationLayout">@layout/action_bar</item>
   <item name="android:customNavigationLayout" tools:ignore="NewApi">@layout/action_bar</item>

    <item name="background">@color/android:white</item>
   <item name="android:background">@color/android:white</item>

action_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/action_bar_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:drawableLeft="@drawable/ic_launcher"
          android:drawablePadding="10dp"
          android:textSize="20sp"
          android:textColor="@android:color/black"
          android:text="@string/app_name"/>
mc.dev
la source
0

J'ai eu un problème similaire, mais avec un espacement entre le haut et l'icône / le logo de l'application personnalisée dans la barre d'action. La solution de Dushyanth de réglage du rembourrage a fonctionné par programme pour moi (réglage du rembourrage sur l'icône d'application / logo). J'ai essayé de trouver android.R.id.home ou R.id.abs__home ( ActionBarSherlock uniquement , car cela garantit la compatibilité descendante), et cela semble fonctionner sur les appareils 2.3-4.3 sur lesquels j'ai testé.

rapaces
la source
0

Pour mon cas, c'est avec la barre d'outils que je l'ai résolu comme ceci:

ic_toolbar_drawble.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@drawable/ic_toolbar"
    android:right="-16dp"
    android:left="-16dp"/>
</layer-list>

Dans mon Fragment, je vérifie l'API:

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
      toolbar.setLogo(R.drawable.ic_toolbar);
else
      toolbar.setLogo(R.drawable.ic_toolbar_draweble);

Bonne chance!

Le contexte
la source
0

Vous pouvez changer drawableSize de votre DrawerArrow comme ceci:

<style name="MyTheme" parent="android:Theme.WithActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="barLength">24dp</item>
    <item name="arrowShaftLength">24dp</item>
    <item name="arrowHeadLength">10dp</item>
    <item name="drawableSize">42dp</item> //this is your answer
</style>

Ce n'est pas la bonne réponse, car vous ne pouvez pas choisir le côté de remplissage et la mise à l'échelle de l'icône DrawerArrow lorsque vous modifiez drawableSize (drawableSize = width = height). Mais vous pouvez vous éloigner de la gauche. À la marge de la droite faire

findViewById(android.R.id.home).setPadding(10, 0, 5, 0);
Andriy Fediv
la source
0

J'ai utilisé cette méthode setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight)et ça marche!

int padding = getResources().getDimensionPixelSize(R.dimen.toolbar_content_insets);
mToolbar.setContentInsetsAbsolute(padding, 0);
THANN Phearum
la source
0

Lorsque vous utilisez une barre d'outils personnalisée, vous pouvez utiliser

toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.activity_title);
setSupportActionBar(toolbar);
getSupportActionBar().setLogo(R.drawable.logo);

et dans la disposition de votre barre d'outils, définissez simplement app:titleMarginStart="16dp"

Notez que vous devez définir l'icône en tant que logo, n'utilisez pas à la getSupportActionBar().setIcon(R.drawable.logo) place: getSupportActionBar().setLogo(R.drawable.logo)

Martin Schüller
la source
0

J'ai utilisé AppBarLayoutet coutume de le ImageButtonfaire.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:elevation="0dp"
    android:background="@android:color/transparent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <ImageView
           android:layout_width="32dp"
           android:layout_height="32dp"
           android:src="@drawable/selector_back_button"
           android:layout_centerVertical="true"
           android:layout_marginLeft="8dp"
           android:id="@+id/back_button"/>

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </RelativeLayout>    
</android.support.design.widget.AppBarLayout>

Mon code Java:

findViewById(R.id.appbar).bringToFront();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
getSupportActionBar().setDisplayShowTitleEnabled(false);
Nouman Ch
la source
0

Vous pouvez également y parvenir par la méthode:

Drawable d = new InsetDrawable(getDrawable(R.drawable.nav_icon),0,0,10,0);
mToolbar.setLogo(d);
E Player Plus
la source
0

Dans votre XML, définissez la vue app:titleMarginde votre barre d'outils comme suit:

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:titleMarginStart="16dp"/>

Ou dans votre code:

toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom
Ahmed Ashour
la source
-2

ce travail pour moi d'ajouter un rembourrage au titre et pour l' ActionBaricône, je l'ai défini par programme.

 getActionBar().setTitle(Html.fromHtml("<font color='#fffff'>&nbsp;&nbsp;&nbsp;Boat App </font>"));
Muhammad Dawood
la source
-2
<string name="app_name">"    "Brick Industry</string>

Ajoutez simplement " "le nom de votre application.Il ajoutera un espace entre l'icône et le titre

Manohar
la source
Ce n'est pas mal, je ne sais pas pourquoi il a été si défavorisé
Martin De Simone
peut-être que parfois la solution la plus simple est la meilleure! merci
Nuhman