Jak zmienić kolor ikony głównej paska Toolbar

108

Używam android.support.v7.widget.Toolbar i dowiedziałem się z tego postu, jak zmienić kolor ikony hamburgera na biały, ale strzałka w górę / w tył pozostaje ciemna, kiedy dzwonię

setDisplayHomeAsUpEnabled(true);

Jak mogę również uczynić strzałkę białą?

Oto jak wygląda mój pasek narzędzi, gdy wywołuję setDisplayHomeAsUpEnabled ():

wprowadź opis obrazu tutaj

... a oto odpowiednia część mojego pliku 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>
Joshua W.
źródło
2
Możesz użyć białej strzałki png i zastąpić ją czarną.
Surender Kumar,
1
Próbuję tego uniknąć i po prostu wskazać kolor jako styl ... jeśli to jedyny sposób, w jaki wiem, że mogę to zrobić za pomocą actionBarDrawerToggle.setHomeAsUpIndicator (R.drawable.arrow);
Joshua W
... również png /com.android.support/appcompat-v7/21.0.3/res/drawable-xxxhdpi/abc_ic_ab_back_mtrl_am_alpha.png jest biały
Joshua W
@JoshuaWitter Dzięki rozwiązaniu mojego problemu, czy możesz mi również pomóc wykryć przycisk kliknięcia Wstecz? oto moje pytanie stackoverflow.com/questions/29138629/ ...
user2056563
1
@JoshuaWitter, nawet jeśli jest biały, zostanie zabarwiony. Zmień colorControlNormalwartość
osrl

Odpowiedzi:

242

Rozwiązałem to, edytując styles.xml:

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

... następnie odwołując się do stylu w definicji paska narzędzi w działaniu:

<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"/>
Joshua W.
źródło
13
Możesz też ustawić colorControlNormalzamiast tegoandroid:textColorSecondary
mbelsky
ale to zmieni kolor całego widżetu, prawda? @mbelsky
Dr. aNdRO
3
@mbelsky Zauważ, że wymaga to poziomu API 21.
Francisco Romero
@ Error404: został dodany na poziomie API 1, jak widać tutaj
Mohamed Hatem Abdu
Cześć wszystkim, Próbowałem twojego kodu, ale nie otrzymuję wymaganego wyniku. W moim pliku toolbar.axml jestem motywem konfiguracyjnym android: theme=@style/ThemeOverlay.AppCompat.Dark.ActionBar, aw moim pliku styles.axml napisałem podany kod, ale kolor przycisku powrotu paska nawigacji bez zmian.
Deepak
57

Oto, czego szukasz. Ale to również zmienia kolor radioButton itp. Więc możesz użyć do tego motywu.

<item name="colorControlNormal">@color/colorControlNormal</item>
osrl
źródło
11
To powinna być akceptowana odpowiedź. Pozwala to osiągnąć to, czego szukałem: <style name = "ActionBarTheme" parent = "ThemeOverlay.AppCompat.Dark.ActionBar"> <item name = "colorControlNormal"> ### COLOR ### </item> </style> zastosuj motyw bezpośrednio do paska narzędzi.
Mavamaarten
1
Atrybut rodzica jest bardzo ważny.
ataravati
36

Rozwiązałem to programowo za pomocą tego kodu:

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

Wersja 1:

Począwszy od API 23 (Marshmallow) zasób do rysowania abc_ic_ab_back_mtrl_am_alphajest zmieniany na abc_ic_ab_back_material.

PayToPwn
źródło
5
ustaw ten również. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Ishan Fernando
Czy to zadziała w Fragment? Jeśli tak, gdzie miałbym umieścić ten kod? OnCreateViewMetoda, korzeń tej klasy, czy ...?
AndroidDevBro
1
@AndroidDevBro Tak, po prostu umieść go w funkcji OnCreate i pamiętaj, aby zaktualizować zasób tak, jak napisał Nouman Tahir w wersji (używając R.drawable.abc_ic_ab_back_material zamiast R.drawable.abc_ic_ab_back_m_am_alpha) i uzyskać SupportActivityBar w ten sposób: ((ApptrlC) getActivity ()). getSupportActionBar (). setHomeAsUpIndicator (upArrow);
PayToPwn
14

Ta odpowiedź może za późno, ale oto jak to robię. Stylizowanie paska narzędzi wystarczy. Utwórz toolbar.xml z następującym kodem.

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

oraz w 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>

Na koniec umieść pasek narzędzi w układzie

<include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
Tuss
źródło
1
ale AppTheme nigdzie się nie odwołuje. czy to jest literówka?
Henry,
11

Zmień motyw paska narzędzi Toolbar na 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>

i uruchom go

mToolbar = (Toolbar) findViewById(R.id.navigation);
setSupportActionBar(mToolbar);
Mayank Jain
źródło
1
Zaskoczyły mnie inne odpowiedzi, zawsze używam tej metody
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>

Za późno na publikację. Pomogło mi to zmienić kolor przycisku Wstecz

sreekumar
źródło
8

Jest na to łatwiejszy sposób

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

I wtedy

arrow.setColor(getResources().getColor(R.color.blue);
Kammaar
źródło
7

Zamiast zmieniać styl, po prostu umieść te dwa wiersze kodu w swoim działaniu.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrowleft);
Shiva Kanumala
źródło
6

Oto moje rozwiązanie:

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

Lub, jeśli chcesz użyć do tego fajnej funkcji:

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

Stosowanie:

toolbar.setNavitationIconColor(someColor)
programista Androida
źródło
To zdecydowanie najlepsza odpowiedź i rozwiązuje mój problem
Zaraki596
5

Ten kod działa dla mnie:

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

Ponadto, jeśli chcesz zmienić kolor tekstu paska narzędzi:

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

Działa od API 19 do 25.

Hermana
źródło
0

Zamiast używać starszego identyfikatora do rysowania „ abc_ic_ab_back_material ”, użyj nowego abc_ic_ab_back_material w każdej wersji interfejsu API. Przetestowałem to w 19, 21, 27 i działam dobrze z poniższym kodem i konfiguracją.

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

    }

Narender Gusain
źródło
0

Spróbuj: Ustaw motyw paska narzędzi w swoim układzie w następujący sposób

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

Jeśli chcesz uzyskać więcej informacji

Ciekawy przypadek Overflow Icon Color autorstwa Martina Bonnina

Moreno
źródło