web-dev-qa-db-fra.com

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 API 21 et l'icône de sauvegarde/sauvegarde est maintenant une flèche noire pointant vers la gauche.

Black back arrow

Je voudrais 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_alpha pour homeAsUpIndicator. Ce dessinable est transparent (seulement 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 DrawerArrowStyle. Ou si la seule solution est de créer mon @drawable/grey_arrow et 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>

Ma solution jusqu’à présent a été de prendre le @drawable/abc_ic_ab_back_mtrl_am_alpha, qui semble être blanc, et de le peindre dans la couleur de mon choix à l’aide d’un éditeur de photos. Cela fonctionne, bien que je préfère utiliser @color/actionbar_text comme dans DrawerArrowStyle.

javaandroiduser-interfacecolorsandroid-styles
170
Ferran Maylinch

Vous pouvez y arriver 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 pouvant être dessinée abc_ic_ab_back_mtrl_am_alpha est remplacée par abc_ic_ab_back_material.

MODIFIER:

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);
317
Carles

En regardant les sources Toolbar et TintManager, drawable/abc_ic_ab_back_mtrl_am_alpha est coloré avec la valeur de l'attribut de 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.

Mettre à jour :

Je l'ai trouvé Vous devez définir l'attribut actionBarTheme ( 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>
186
rockgecko

Essayé toutes les suggestions ci-dessus. La seule manière pour laquelle j'ai réussi à modifier la couleur de la flèche de la touche Précédent du bouton Précédent de la barre de navigation par défaut de ma barre d'outils consiste à définir colorControlNormal dans le thème de base de cette manière. 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>
108
Harry Aung

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 appliquer directement à votre thème - 

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

Il suffit d'ajouter 

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

au thème de votre application actuelle.

43
S bruce

Comme indiqué dans la plupart des commentaires précédents, la solution consiste à ajouter 

<item name="colorControlNormal">@color/white</item> au thème de votre application. Mais confirmez que vous n’avez pas défini de thème dans votre élément Barre d’outils de votre présentation.

     <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" />
30
manuelvsc

si vous utilisez Toolbar, vous pouvez essayer ceci

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

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}. Donc, la réponse mise à jour serait

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 constaté que l’appel 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 ()

10
capt.swag

J'ai trouvé une solution qui fonctionne avant Lollipop. Définissez "colorControlNormal" dans "actionBarWidgetTheme" pour modifier la couleur de homeAsUpIndicator. Modifier la réponse de rockgecko d'en haut 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>
7
GFred

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>
6
nuttynibbles

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;
}

Maintenant, vous pouvez définir le dessinable avec:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());
5
Jumpa

 enter image description here

Changer la couleur de l'icône de menu Nav

 Final convert Menu Icon Color

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>
5
Sumit Saxena

Une autre solution qui pourrait fonctionner pour vous est de ne pas déclarer votre barre d'outils en tant que barre d'actions de l'application (par setActionBar ou setSupportActionBar) et de définir l'icône de retour dans votre onActivityCreated à l'aide du code mentionné dans une autre réponse de 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 n'obtiendrez pas le rappel onOptionItemSelected lorsque vous appuierez sur le bouton Précédent. 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. 

4
Vinay Wadhwa

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);
1
Siddarth Kanted

Nous rencontrions le même problème et tout ce que nous voulions, c’était de 

app: 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" />
1
Julian Horst

Vous pouvez modifier la couleur de l'icône de navigation par programme de la manière suivante:

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;
}
0
pks

Je viens de changer le thème de la barre d’outils en @ 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">
0
fullMoon

Solution simple qui a fonctionné pour moi (si vous devez utiliser la même couleur de flèche dans toute l'application):

  1. Enregistrez l’icône de flèche que vous souhaitez utiliser dans le dossier pouvant être dessiné (assurez-vous qu’elle a la couleur souhaitée; vous pouvez changer votre couleur au format xml si vous utilisez un vecteur xml pouvant être dessiné).

  2. Attribuez cette nouvelle icône de flèche à la barre d'action:

    ActionBar actionBar = getSupportActionBar (); ActionBar.setHomeAsUpIndicator (R.drawable.ic_your_icon_here);

0
evanca