[android] How to change Toolbar home icon color

I am using a android.support.v7.widget.Toolbar and learned from this post how to change the color of the hamburger icon to white, but the up/back arrow remains a dark color when I call

setDisplayHomeAsUpEnabled(true);

How can I make the arrow white as well?

Here is what my toolbar looks like when I call setDisplayHomeAsUpEnabled():

enter image description here

...and here is the relevant portion of my styles.xml file:

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

This question is related to android icons toolbar android-support-library

The answer is


This answer maybe too late, but here is how I do it. Styling the toolbar will do the trick. Create toolbar.xml with following code.

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

and in the 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>

Finally, include the toolbar inside layout

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

This code works for 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();

Also, if you want to change the toolbar text color:

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

Working from API 19 through 25.


Instead of style changes, just put these two lines of code to your activity.

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

   <!-- 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>

Too late to post, this worked for me to change the color of the back button


Here is what you are looking for. But this also changes the color of radioButton etc. So you might want to use a theme for it.

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

Here's my solution:

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

Or, if you want to use a nice function for it:

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

Usage:

toolbar.setNavitationIconColor(someColor)

Instead of using older drawable id "abc_ic_ab_back_material", use the new one abc_ic_ab_back_material in every api version. I have tested it in 19, 21, 27 and working fine with below code and configuration.

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

    }


Try this: Set the toolbar's theme in your layout as follows

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

If you want further information

The curious case of the Overflow Icon Color by Martin Bonnin


Well there is a more easy way to do this

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

And then

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

I solved it programmatically using this 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);

Revision 1:

Starting from API 23 (Marshmallow) the drawable resource abc_ic_ab_back_mtrl_am_alpha is changed to abc_ic_ab_back_material.


Change your Toolbar Theme to 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>

and set it in activty

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

Examples related to android

Under what circumstances can I call findViewById with an Options Menu / Action Bar item? How to implement a simple scenario the OO way My eclipse won't open, i download the bundle pack it keeps saying error log getting " (1) no such column: _id10 " error java doesn't run if structure inside of onclick listener Cannot retrieve string(s) from preferences (settings) strange error in my Animation Drawable how to put image in a bundle and pass it to another activity FragmentActivity to Fragment A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to icons

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp? Round button with text and icon in flutter Add tooltip to font awesome icon How to add icons to React Native app How to set app icon for Electron / Atom Shell App Android Push Notifications: Icon not displaying in notification, white square shown instead Pyinstaller setting icons don't change How to change Toolbar home icon color iOS how to set app icon and launch images Put search icon near textbox using bootstrap

Examples related to toolbar

setSupportActionBar toolbar cannot be applied to (android.widget.Toolbar) error How to change Toolbar home icon color Creating a SearchView that looks like the material design guidelines How to set Toolbar text and back arrow color How do you set the title color for the new Toolbar? In android app Toolbar.setTitle method has no effect – application name is shown as title How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?

Examples related to android-support-library

No resource found that matches the given name: attr 'android:keyboardNavigationCluster'. when updating to Support Library 26.0.0 Failed to resolve: com.android.support:cardview-v7:26.0.0 android Setting up Gradle for api 26 (Android) How to make ConstraintLayout work with percentage values? Cannot resolve symbol HttpGet,HttpClient,HttpResponce in Android Studio Change EditText hint color when using TextInputLayout Cannot resolve symbol AppCompatActivity - Support v7 libraries aren't recognized? Error inflating class android.support.design.widget.NavigationView FloatingActionButton example with Support Library How to use and style new AlertDialog from appCompat 22.1 and above