Come cambiare il colore dell'icona home di Google Toolbar


108

Sto usando android.support.v7.widget.Toolbar e da questo post ho imparato come cambiare il colore dell'icona dell'hamburger in bianco, ma la freccia su / indietro rimane di un colore scuro quando chiamo

setDisplayHomeAsUpEnabled(true);

Come posso rendere bianca anche la freccia?

Ecco come appare la mia barra degli strumenti quando chiamo setDisplayHomeAsUpEnabled ():

inserisci qui la descrizione dell'immagine

... ed ecco la parte rilevante del mio file 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
Puoi usare l'icona png della freccia bianca e sostituirla con quella nera.
Surender Kumar

1
Sto cercando di evitarlo e di indicare solo un colore come stile ... se è l'unico modo in cui so di poterlo fare tramite actionBarDrawerToggle.setHomeAsUpIndicator (R.drawable.arrow);
Joshua W

... anche il png /com.android.support/appcompat-v7/21.0.3/res/drawable-xxxhdpi/abc_ic_ab_back_mtrl_am_alpha.png appare bianco
Joshua W

@JoshuaWitter Grazie per aver risolto il mio problema, puoi anche aiutarmi a rilevare il clic sul pulsante Indietro? qui è la mia domanda stackoverflow.com/questions/29138629/...
user2056563

1
@JoshuaWitter anche se è bianco, si colora. Modificare il colorControlNormalvalore
osrl

Risposte:


242

L'ho risolto modificando styles.xml:

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

... quindi facendo riferimento allo stile nella definizione della barra degli strumenti nell'attività:

<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
Inoltre puoi impostare colorControlNormalinveceandroid:textColorSecondary
mbelsky

ma questo cambierà il colore dell'intero widget, giusto? @mbelsky
Dr. aNdRO

3
@mbelsky Nota che richiede il livello API 21.
Francisco Romero

@ Error404: è stato aggiunto nel livello API 1 come vedi qui
Mohamed Hatem Abdu

Ciao a tutti, ho provato il tuo codice ma non ottengo il risultato richiesto. Nel mio file toolbar.axml sono il tema di installazione è android: theme=@style/ThemeOverlay.AppCompat.Dark.ActionBar e nel mio file styles.axml ho scritto il codice dato ma il colore del pulsante Indietro della barra di navigazione non cambia.
Deepak

57

Ecco cosa stai cercando. Ma questo cambia anche il colore di radioButton ecc. Quindi potresti voler usare un tema per questo.

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

11
Questa dovrebbe essere la risposta accettata. Questo ottiene ciò che stavo cercando: <style name = "ActionBarTheme" parent = "ThemeOverlay.AppCompat.Dark.ActionBar"> <item name = "colorControlNormal"> ### COLOR ### </item> </style> applica il tema direttamente alla barra degli strumenti.
Mavamaarten

1
L'attributo genitore è molto importante.
ataravati

36

L'ho risolto a livello di codice utilizzando questo codice:

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

Revisione 1:

A partire dall'API 23 (Marshmallow) la risorsa disegnabile abc_ic_ab_back_mtrl_am_alphaviene modificata in abc_ic_ab_back_material.


5
imposta anche questo. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Ishan Fernando

Funzionerebbe in un Fragment? In tal caso, dove dovrei inserire questo codice? Il OnCreateViewmetodo, la radice della classe o ...?
AndroidDevBro

1
@AndroidDevBro Sì, basta inserirlo nella funzione OnCreate e ricordarsi di aggiornare la risorsa come ha scritto Nouman Tahir nella revisione (utilizzando R.drawable.abc_ic_ab_back_material invece di R.drawable.abc_ic_ab_back_mtrl_am_alpha) e ottenere la SupportActionBar in questo modo: ((AppCompatActivity) . getActivity ()) getSupportActionBar () setHomeAsUpIndicator (upArrow).;
PayToPwn

14

Questa risposta forse è troppo tardi, ma ecco come lo faccio. Lo stile della barra degli strumenti farà il trucco. Crea toolbar.xml con il seguente codice.

<?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" />

e nel file 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>

Infine, includi la barra degli strumenti all'interno del layout

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

1
ma AppTheme non è referenziato da nessuna parte. è un errore di battitura?
Henry

11

Cambia il tema della barra degli strumenti in 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>

e impostalo in attività

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

1
Sono rimasto sorpreso delle altre risposte, uso sempre questo metodo
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>

Troppo tardi per postare, questo ha funzionato per me per cambiare il colore del pulsante Indietro


8

Bene, c'è un modo più semplice per farlo

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

E poi

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

7

Invece di modificare lo stile, inserisci queste due righe di codice nella tua attività.

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

6

Ecco la mia soluzione:

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

Oppure, se vuoi usare una bella funzione per questo:

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

Uso:

toolbar.setNavitationIconColor(someColor)

Questa è di gran lunga la risposta migliore e risolve il mio problema
Zaraki596

5

Questo codice funziona per me:

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();

Inoltre, se desideri modificare il colore del testo della barra degli strumenti:

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

Funzionando dall'API 19 alla 25.


0

Invece di utilizzare il vecchio id drawable " abc_ic_ab_back_material ", usa il nuovo abc_ic_ab_back_material in ogni versione di API. L'ho testato in 19, 21, 27 e funziona bene con il codice e la configurazione seguenti.

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

    }


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.