web-dev-qa-db-fra.com

Comment changer les icônes du menu de navigation et de dépassement de barre d'outils (appcompat v7)?

J'ai de la difficulté avec v7 Toolbar. Ce qui était autrefois une tâche simple pour ActionBar semble maintenant trop complexe. Quel que soit le style que je définis, je ne peux pas modifier l’icône de navigation (qui ouvre un tiroir) ni l’icône de menu supérieur (qui ouvre un menu). 

J'ai donc une Toolbar

<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/ghex"
    Android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

Je code ça ressemble à ça

//before in the code I do
mToolbar = (Toolbar) findViewById(R.id.toolbar);

private void initToolbar() {
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

Maintenant, je dois changer la Drawable pour ces deux icônes.

Comment puis-je faire cela pour compat v7 Toolbar? Je suppose que je devrais changer la flèche visible lorsque le tiroir est ouvert (Android 5.0).

androidandroid-layoutmaterial-designappcompatandroid-toolbar
27
sandalone

Pour changer l'icône de navigation, vous pouvez utiliser:

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.my_icon);

Pour changer l’icône de débordement, vous pouvez définir un style comme celui-ci:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

<style name="OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="Android:src">@drawable/my_overflow_menu</item>
</style>

Dans tous les cas, ce ne serait pas une bonne idée de changer une icône standard, comme le menu débordement.

Si vous souhaitez changer la couleur de l'icône, vous pouvez utiliser:

<Android.support.v7.widget.Toolbar
  app:theme="@style/ThemeToolbar" />


<style name="ThemeToolbar" parent="Theme.AppCompat.Light">

   <!-- navigation icon color -->
   <item name="colorControlNormal">@color/my_color</item>

    <!-- color of the menu overflow icon -->
    <item name="Android:textColorSecondary">@color/my_color</item>
</style>
102
Gabriele Mariotti
    mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
    mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.ic_menu));
17
androidmalin

Pour le bon menu, vous pouvez le faire: 

public static Drawable setTintDrawable(Drawable drawable, @ColorInt int color) {
            drawable.clearColorFilter();
            drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
            drawable.invalidateSelf();
            Drawable wrapDrawable = DrawableCompat.wrap(drawable).mutate();
            DrawableCompat.setTint(wrapDrawable, color);
            return wrapDrawable;
        }

Et dans ton activité

@Override
 public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        Drawable send = menu.findItem(R.id.send);
        Drawable msg = menu.findItem(R.id.message);
        DrawableUtils.setTintDrawable(send.getIcon(), Color.WHITE);
        DrawableUtils.setTintDrawable(msg.getIcon(), Color.WHITE);
        return true;
    }

Voici le résultat:

 enter image description here

4
chry

Il existe une approche simple, facile et meilleure, si nous devons changer uniquement la couleur de l’icône hamburger/arrière. 

Il est préférable de ne changer que la couleur de l'icône souhaitée, alors que colorControlNormal et Android:textColorSecondary peuvent également affecter d'autres vues d'enfants de la barre d'outils.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@Android:color/white</item>
</style>
2
Sachin Gupta

Toutes les solutions ci-dessus ont fonctionné pour moi dans API 21 ou supérieure, mais non dans API 19 (KitKat). Faire un petit changement a fait l'affaire pour moi dans les versions précédentes. Remarquez Widget.Holo au lieu de Widget.AppCompat

<style name="OverFlowStyle"    parent="@Android:style/Widget.Holo.ActionButton.Overflow">
    <item name="Android:src">@drawable/ic_overflow</item>
</style>
1
Eric B.

ajoutez votre thème par défaut cette ligne;

   <item name="colorControlNormal">@color/my_color</item>
1
alicanozkara

si vous voulez changer vos icônes en Vecteur , créez-en une nouvelle . puis dans votre Activity.Java:

Toolbar toolbar = findViewById(R.id.your_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationIcon(R.drawable.your_icon);
mToolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.your_icon2));

Pour changer Vector icon Color, allez dans votre Fichier XML Vector ... Dans ce cas, ce sera your_icon.xml, cela ressemblera à ceci:

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:width="24dp"
    Android:height="24dp"
    Android:viewportWidth="24.0"
    Android:viewportHeight="24.0">
<path
    Android:fillColor="@color/Your_Color"
    Android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

Notez que nous avons utilisé ces attributs pour définir la couleur du vecteur: 

Android:fillColor="@color/Your_Color"

Edit : Vous ne pouvez pas utiliser une couleur de vos couleurs.XML ou ailleurs, la couleur doit être décalquée directement dans le fichier XML du vecteur. Elle se présentera ainsi: 

Android:fillColor="#FFF"
1
Tamim Production

quel thème vous avez utilisé dans l'activité ajouter ci-dessous un code de ligne

pour le blanc

<style name="AppTheme.NoActionBar">
      <item name="Android:tint">#ffffff</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="Android:tint">#ffffff</item>
</style>

pour le noir 

   <style name="AppTheme.NoActionBar">
      <item name="Android:tint">#000000</item>
  </style>

or 
 <style name="AppThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="Android:tint">#000000</item>
</style>
0
pruthwiraj.kadam

vous pouvez utiliser Android:tint si vous souhaitez modifier les icônes d’éléments de menu, les icônes de flèche (haut/bas) et les 3 points

  <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:tint">@color/your_color</item>
  </style>
0
user25