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>

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

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>

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.


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

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

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


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

7

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

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

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)

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.


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;

    }


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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.