Comment changer la couleur de l'icône d'accueil de la barre d'outils


108

J'utilise une barre d'outils android.support.v7.widget.Toolbar et j'ai appris de ce post comment changer la couleur de l'icône du hamburger en blanc, mais la flèche haut / arrière reste une couleur sombre lorsque j'appelle

setDisplayHomeAsUpEnabled(true);

Comment puis-je rendre la flèche blanche également?

Voici à quoi ressemble ma barre d'outils lorsque j'appelle setDisplayHomeAsUpEnabled ():

entrez la description de l'image ici

... et voici la partie pertinente de mon fichier styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">#194C5F</item>
    <item name="colorAccent">@color/accent</item>
    <item name="drawerArrowStyle">@style/WhiteDrawerIconStyle</item>
</style>

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

2
Vous pouvez utiliser l'icône png de flèche blanche et la remplacer par une icône noire.
Surender Kumar

1
J'essaie d'éviter cela et d'indiquer simplement une couleur comme style ... si c'est la seule façon dont je sais que je peux le faire via actionBarDrawerToggle.setHomeAsUpIndicator (R.drawable.arrow);
Joshua W

... aussi le png /com.android.support/appcompat-v7/21.0.3/res/drawable-xxxhdpi/abc_ic_ab_back_mtrl_am_alpha.png apparaît en blanc
Joshua W

@JoshuaWitter Merci d'avoir résolu mon problème, pouvez-vous également m'aider à détecter le clic sur le bouton retour? voici ma question stackoverflow.com/questions/29138629/…
user2056563

1
@JoshuaWitter même s'il est blanc, il est teinté. Changer la colorControlNormalvaleur
osrl

Réponses:


242

Je l'ai résolu en éditant styles.xml:

<style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">INSERT_COLOR_HERE</item>
</style>

... puis référencer le style dans la définition de la barre d'outils dans l'activité:

<LinearLayout
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <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"
        app:theme="@style/ToolbarColoredBackArrow"
        app:popupTheme="@style/AppTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

13
Vous pouvez également définir à la colorControlNormalplaceandroid:textColorSecondary
mbelsky

mais cela changera la couleur de tout le widget, non? @mbelsky
Dr. aNdRO

3
@mbelsky Notez qu'il nécessite le niveau d'API 21.
Francisco Romero

@ Error404: il est ajouté au niveau API 1 comme vous le voyez ici
Mohamed Hatem Abdu

Salut à tous, j'ai essayé votre code mais je n'obtiens pas le résultat requis. Dans mon fichier toolbar.axml, le thème de configuration est android: theme=@style/ThemeOverlay.AppCompat.Dark.ActionBar et dans mon fichier styles.axml, j'ai écrit votre code donné, mais la couleur du bouton de retour de la barre de navigation reste inchangée.
Deepak

57

Voici ce que vous recherchez. Mais cela change également la couleur de radioButton, etc. Vous pouvez donc utiliser un thème pour cela.

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

11
Cela devrait être la réponse acceptée. Cela réalise ce que je recherchais: <style name = "ActionBarTheme" parent = "ThemeOverlay.AppCompat.Dark.ActionBar"> <item name = "colorControlNormal"> ### COLOR ### </item> </style> appliquez le thème directement à la barre d'outils.
Mavamaarten

1
L'attribut parent est très important.
ataravati

36

Je l'ai résolu par programme en utilisant ce code:

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), 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 modifiée en abc_ic_ab_back_material.


5
réglez celui-ci également. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Ishan Fernando

Cela fonctionnerait-il dans un Fragment? Si oui, où placerais-je ce code? La OnCreateViewméthode, la racine de la classe, ou ...?
AndroidDevBro

1
@AndroidDevBro Oui, mettez-le simplement dans la fonction OnCreate et n'oubliez pas de mettre à jour la ressource comme Nouman Tahir l'a écrit dans la révision (en utilisant R.drawable.abc_ic_ab_back_material au lieu de R.drawable.abc_ic_ab_back_mtrl_am_alpha) et en obtenant le SupportActionBar comme ceci: ((AppCompatActivityActivity) getActivity ()). getSupportActionBar (). setHomeAsUpIndicator (upArrow);
PayToPwn

14

Cette réponse peut-être trop tard, mais voici comment je le fais. Le style de la barre d'outils fera l'affaire. Créez toolbar.xml avec le code suivant.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true"
android:layout_gravity="bottom"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

et dans le styles.xml

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--
    -->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Enfin, incluez la barre d'outils dans la mise en page

<include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

1
mais AppTheme n'est référencé nulle part. est-ce une faute de frappe?
Henry

11

Changez votre thème de barre d'outils en ThemeOverlay.AppCompat.Dark

<?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/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    app:theme="@style/ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

et le mettre en activité

mToolbar = (Toolbar) findViewById(R.id.navigation);
setSupportActionBar(mToolbar);

1
J'ai été surpris des autres réponses, j'utilise toujours cette méthode
C. Skjerdal

9
   <!-- ToolBar -->
    <style name="ToolBarTheme.ToolBarStyle"    parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorPrimaryInverse">@color/white</item>
    </style>

Trop tard pour publier, cela a fonctionné pour moi de changer la couleur du bouton de retour


8

Eh bien, il existe un moyen plus simple de le faire

drawerToggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open_drawer, R.string.close_drawer);
arrow = drawerToggle.getDrawerArrowDrawable();

Puis

arrow.setColor(getResources().getColor(R.color.blue);

7

Au lieu de changements de style, ajoutez simplement ces deux lignes de code à votre activité.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrowleft);

6

Voici ma solution:

toolbar.navigationIcon?.mutate()?.let {
  it.setTint(theColor)
  toolbar.navigationIcon = it
}

Ou, si vous souhaitez utiliser une fonction intéressante pour cela:

fun Toolbar.setNavigationIconColor(@ColorInt color: Int) = navigationIcon?.mutate()?.let {
    it.setTint(color)
    this.navigationIcon = it
}

Usage:

toolbar.setNavitationIconColor(someColor)

C'est de loin la meilleure réponse et cela résout mon problème
Zaraki596

5

Ce code fonctionne pour moi:

public static Drawable changeBackArrowColor(Context context, int color) {
    String resName;
    int res;

    resName = Build.VERSION.SDK_INT >= 23 ? "abc_ic_ab_back_material" : "abc_ic_ab_back_mtrl_am_alpha";
    res = context.getResources().getIdentifier(resName, "drawable", context.getPackageName());

    final Drawable upArrow = context.getResources().getDrawable(res);
    upArrow.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);

    return upArrow;
}

...

getSupportActionBar().setHomeAsUpIndicator(changeBackArrowColor(this, Color.rgb(50, 50, 50)));               
supportInvalidateOptionsMenu();

De plus, si vous souhaitez modifier la couleur du texte de la barre d'outils:

Spannable spannableString = new SpannableString(t);
spannableString.setSpan(new ForegroundColorSpan(Color.rgb(50, 50, 50)), 0, t.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
toolbar.setText(spannableString);

Travailler de l'API 19 à 25.


0

Au lieu d'utiliser l'ancien identifiant " abc_ic_ab_back_material ", utilisez le nouveau abc_ic_ab_back_material dans chaque version de l'API. Je l'ai testé en 19, 21, 27 et fonctionne bien avec le code et la configuration ci-dessous.

  • minSdkVersion = 17
  • targetSdkVersion = 26
  • compileSdkVersion = 27

    public static Drawable changeBackArrowColor(Context context, int color) {
    int res;
    res = context.getResources().getIdentifier("abc_ic_ab_back_material", "drawable", context.getPackageName());
    if (res == 0)
        return null;
    final Drawable upArrow = ContextCompat.getDrawable(context, res);
    upArrow.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
    
    return upArrow;

    }


0

Essayez ceci: définissez le thème de la barre d'outils dans votre mise en page comme suit

android:theme = "@android:style/ThemeOverlay.Material.Dark.ActionBar"

Si vous souhaitez plus d'informations

Le cas curieux du Overflow Icon Color de Martin Bonnin

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.