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

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

I solved it by editing styles.xml:

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

...then referencing the style in the Toolbar definition in the activity:

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

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>

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.

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

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

       

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)

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

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

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

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

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.

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

Wasn't able to color it with the solutions here for some reason. But using com.google.android.material.appbar.MaterialToolbar instead you can use

app:navigationIconTint="@color/black"

See: https://material.io/components/app-bars-top/android#regular-top-app-bar

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;
  

  }