Comment changer la couleur de la flèche arrière dans le nouveau thème de matériau?

J'ai mis à jour mon SDK vers l'API 21 et maintenant l'icône de sauvegarde / remontée est une flèche noire pointant vers la gauche.

J'aimerais que ce soit gris. Comment puis je faire ça?

Dans le Play Store, par exemple, la flèche est blanche.

J'ai fait cela pour définir certains styles. J'ai utilisé @drawable/abc_ic_ab_back_mtrl_am_alphapour homeAsUpIndicator. Ce dessinable est transparent (uniquement alpha) mais la flèche est affichée en noir. Je me demande si je peux définir la couleur comme je le fais dans le DrawerArrowStyle. Ou si la seule solution est de créer my @drawable/grey_arrowet de l'utiliser pour homeAsUpIndicator.

<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">

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

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

    <item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:homeAsUpIndicator" tools:ignore="NewApi">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>

<!-- ActionBar style -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">

    <item name="android:background">@color/actionbar_background</item>
    <!-- Support library compatibility -->
    <item name="background">@color/actionbar_background</item>
</style>

<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/actionbar_text</item>
</style>

Jusqu'à présent, ma solution a été de prendre le @drawable/abc_ic_ab_back_mtrl_am_alpha, qui semble être blanc, et de le peindre dans la couleur que je désire à l'aide d'un éditeur de photos. Cela fonctionne, même si je préfère utiliser @color/actionbar_textcomme dans DrawerArrowStyle.

Vous pouvez y parvenir grâce au code. Obtenez la flèche de retour dessinable, modifiez sa couleur avec un filtre et définissez-la comme bouton de retour.

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Révision 1:

À partir de l'API 23 (Marshmallow), la ressource dessinable abc_ic_ab_back_mtrl_am_alphaest remplacée par abc_ic_ab_back_material.

ÉDITER:

Vous pouvez utiliser ce code pour obtenir les résultats souhaités:

toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);

En regardant la source Toolbaret TintManager, drawable/abc_ic_ab_back_mtrl_am_alphaest teintée avec la valeur de l'attribut style colorControlNormal.

J'ai essayé de définir cela dans mon projet (avec <item name="colorControlNormal">@color/my_awesome_color</item>dans mon thème), mais c'est toujours noir pour moi.

Mise à jour :

Je l'ai trouvé. Vous devez définir l' actionBarThemeattribut ( pas actionBarStyle ) avec colorControlNormal.

Par exemple:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">       
    <!-- THIS is where you can color the arrow! -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

<style name="MyApp.ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="elevation">0dp</item>      
    <!-- style for actionBar title -->  
    <item name="titleTextStyle">@style/ActionBarTitleText</item>
    <!-- style for actionBar subtitle -->  
    <item name="subtitleTextStyle">@style/ActionBarSubtitleText</item>

    <!-- 
    the actionBarTheme doesn't use the colorControlNormal attribute
    <item name="colorControlNormal">@color/my_awesome_color</item>
     -->
</style>

J'ai essayé toutes les suggestions ci-dessus. La seule façon dont j'ai réussi à changer la couleur de la flèche du bouton Retour par défaut de l'icône de navigation dans ma barre d'outils est de définir colorControlNormal dans le thème de base comme celui-ci. Probablement dû au fait que le parent utilise Theme.AppCompat.Light.NoActionBar

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>

Besoin d'ajouter un seul attribut à votre thème de barre d'outils -

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/arrow_color</item>
</style>

Appliquez ce toolbar_theme à votre barre d'outils.

OU

vous pouvez directement appliquer à votre thème -

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/arrow_color</item> 
  //your code ....
</style>

Il suffit d'ajouter

<item name="colorControlNormal">@color/white</item> 

à votre thème d'application actuel.

si vous l'utilisez Toolbar, vous pouvez essayer ceci

Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

Comme dit sur la plupart des commentaires précédents, la solution est d'ajouter

<item name="colorControlNormal">@color/white</item> au thème de votre application. Mais confirmez que vous n'avez pas d'autre thème défini dans votre élément Toolbar sur votre mise en page.

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

La réponse de Carles est la bonne réponse, mais peu de méthodes comme getDrawable (), getColor () sont devenues obsolètes au moment où j'écris cette réponse . La réponse mise à jour serait donc

Drawable upArrow = ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Suite à d'autres requêtes stackoverflow, j'ai trouvé que l'appel de ContextCompat.getDrawable () est similaire à

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    return resources.getDrawable(id, context.getTheme());
} else {
    return resources.getDrawable(id);
}

Et ContextCompat.getColor () est similaire à

public static final int getColor(Context context, int id) {
    final int version = Build.VERSION.SDK_INT;
    if (version >= 23) {
        return ContextCompatApi23.getColor(context, id);
    } else {
        return context.getResources().getColor(id);
    }
}

Lien 1: ContextCompat.getDrawable ()

Lien 2: ContextCompat.getColor ()

J'ai trouvé une solution qui fonctionne avant Lollipop. Définissez le "colorControlNormal" dans le "actionBarWidgetTheme" pour changer la couleur homeAsUpIndicator. Modification de la réponse de rockgecko ci-dessus pour ressembler à ceci:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <!-- The style for the widgets on the ActionBar. -->
    <item name="actionBarWidgetTheme">@style/WidgetStyle</item>
</style>

<style name="WidgetStyle" parent="style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

Sur compileSdkVersoin 25, vous pouvez faire ceci:

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
     <item name="android:textColorSecondary">@color/your_color</item>
</style>

Utilisez la méthode ci-dessous:

private Drawable getColoredArrow() {
    Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

    if (arrowDrawable != null && wrapped != null) {
        // This should avoid tinting all the arrows
        arrowDrawable.mutate();
        DrawableCompat.setTint(wrapped, Color.GRAY);
    }

    return wrapped;
}

Vous pouvez maintenant définir le dessinable avec:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

Changer la couleur de l'icône de navigation du menu

Dans style.xml:

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="android:textColor">@color/colorAccent</item>


</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/colorPrimaryDark</item>
</style>







In Mainfests.xml :

<activity android:name=".MainActivity"
        android:theme="@style/MyMaterialTheme.Base"></activity>

Une autre solution qui pourrait fonctionner pour vous est de ne pas déclarer votre barre d'outils comme barre d'action de l'application (par setActionBarou setSupportActionBar) et de définir l'icône de retour dans votre onActivityCreated en utilisant le code mentionné dans une autre réponse sur cette page

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);

Désormais, vous ne recevrez pas le onOptionItemSelectedrappel lorsque vous appuyez sur le bouton de retour. Cependant, vous pouvez vous inscrire pour cela en utilisant setNavigationOnClickListener. C'est ce que je fais:

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        getActivity().onBackPressed(); //or whatever you used to do on your onOptionItemSelected's android.R.id.home callback
    }
});

Je ne sais pas si cela fonctionnera si vous travaillez avec des éléments de menu.

Nous étions confrontés au même problème et tout ce que nous voulions était de régler le

application: collapseIcon

attribut dans la barre d'outils à la fin, que nous n'avons pas trouvé car il n'est pas très bien documenté :)

<android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/toolbarHeight"
         app:collapseIcon="@drawable/collapseBackIcon" />

essaye ça

public void enableActionBarHomeButton(AppCompatActivity appCompatActivity, int colorId){

    final Drawable upArrow = ContextCompat.getDrawable(appCompatActivity, R.drawable.abc_ic_ab_back_material);
    upArrow.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

    android.support.v7.app.ActionBar mActionBar = appCompatActivity.getSupportActionBar();
    mActionBar.setHomeAsUpIndicator(upArrow);
    mActionBar.setHomeButtonEnabled(true);
    mActionBar.setDisplayHomeAsUpEnabled(true);
}

appel de fonction:

enableActionBarHomeButton(this, R.color.white);

C'est ce qui a fonctionné pour moi:

Ajoutez les attributs ci-dessous à votre thème.

Pour changer la flèche de retour de la barre d'outils / de la barre d'actions au-dessus de l'API 21

<item name="android:homeAsUpIndicator">@drawable/your_drawable_icon</item>

Pour changer la flèche de retour de la barre d'outils / de la barre d'action sous l'API 21

<item name="homeAsUpIndicator">@drawable/your_drawable_icon</item>

Pour changer la flèche arrière du mode d'action

<item name="actionModeCloseDrawable">@drawable/your_drawable_icon</item>

Pour supprimer l'ombre de la barre d'outils / de la barre d'action

<item name="android:elevation" tools:targetApi="lollipop">0dp</item>
<item name="elevation">0dp</item>
<!--backward compatibility-->
<item name="android:windowContentOverlay">@null</item>

Pour modifier le dessin de dépassement de la barre d'actions

<!--under theme-->
<item name="actionOverflowButtonStyle">@style/MenuOverflowStyle</item>

<style name="MenuOverflowStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/ic_menu_overflow</item>

Remarque: 'srcCompat' est utilisé à la place de 'android: src' en raison de la prise en charge vectorielle dessiné pour les api inférieurs à 21

La solution est très simple

Mettez simplement la ligne suivante dans votre style nommé AppTheme

<item name="colorControlNormal">@color/white</item>

Maintenant, tout votre code xml ressemblera à celui ci-dessous (style par défaut).

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">#0F0F0F</item>
        <item name="android:statusBarColor">#EEEEF0</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActivityTransitions">true</item>

        <item name="colorControlNormal">@color/white</item>
</style>

Je viens de changer le thème de la barre d'outils pour être @ style / ThemeOverlay.AppCompat.Light

et la flèche est devenue gris foncé

            <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Light">

Voici comment je l'ai fait dans Material Components:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

<style name="AppTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
</style>

Vous pouvez changer la couleur de l'icône de navigation par programme comme ceci:

mToolbar.setNavigationIcon(getColoredArrow()); 

private Drawable getColoredArrow() {
        Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

        if (arrowDrawable != null && wrapped != null) {
            // This should avoid tinting all the arrows
            arrowDrawable.mutate();
                DrawableCompat.setTintList(wrapped, ColorStateList.valueOf(this.getResources().getColor(R.color.your_color)));
            }
        }

        return wrapped;
}

Supprimez simplement android:homeAsUpIndicatoret homeAsUpIndicatorde votre thème et tout ira bien. L' colorattribut de votre DrawerArrowStylestyle doit être suffisant.

À moins qu'il n'y ait une meilleure solution ...

Ce que j'ai fait, c'est de prendre les @drawable/abc_ic_ab_back_mtrl_am_alphaimages, qui semblent blanches, et de les peindre dans la couleur que je désire à l'aide d'un éditeur de photos.