How to change color of the back arrow in the new material theme?

Question

I've updated my SDK to API 21 and now the back/up icon is a black arrow pointing to the left.

I would like it to be grey. How can I do that?

In the Play Store, for example, the arrow is white.

I've done this to set some styles. I have used @drawable/abc_ic_ab_back_mtrl_am_alpha for homeAsUpIndicator. That drawable is transparent (only alpha) but the arrow is displayed in black. I wonder if I can set the color like I do in the DrawerArrowStyle. Or if the only solution is to create my @drawable/grey_arrow and use it for homeAsUpIndicator.

<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">

    <item name="android:actionBarStyle" tools:ignore="NewApi">@style/MyActionBar</item>
    <item name="actionBarStyle">@style/MyActionBar</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

    <item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:homeAsUpIndicator" tools:ignore="NewApi">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>

<!-- ActionBar style -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">

    <item name="android:background">@color/actionbar_background</item>
    <!-- Support library compatibility -->
    <item name="background">@color/actionbar_background</item>
</style>

<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/actionbar_text</item>
</style>

My solution so far has been to take the @drawable/abc_ic_ab_back_mtrl_am_alpha, which seems to be white, and paint it in the color I desire using a photo editor. It works, although I would prefer to use @color/actionbar_text like in DrawerArrowStyle.

Solution 1

You can achieve it through code. Obtain the back arrow drawable, modify its color with a filter, and set it as back button.

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), 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.

EDIT:

You can use this code to achieve the results you want:

toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);

Solution 2

Looking at the Toolbar and TintManager source, drawable/abc_ic_ab_back_mtrl_am_alpha is tinted with the value of the style attribute colorControlNormal.

I did try setting this in my project (with <item name="colorControlNormal">@color/my_awesome_color</item> in my theme), but it's still black for me.

Update:

Found it. You need to set the actionBarTheme attribute (not actionBarStyle) with colorControlNormal.

Eg:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">       
    <!-- THIS is where you can color the arrow! -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

<style name="MyApp.ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="elevation">0dp</item>      
    <!-- style for actionBar title -->  
    <item name="titleTextStyle">@style/ActionBarTitleText</item>
    <!-- style for actionBar subtitle -->  
    <item name="subtitleTextStyle">@style/ActionBarSubtitleText</item>

    <!-- 
    the actionBarTheme doesn't use the colorControlNormal attribute
    <item name="colorControlNormal">@color/my_awesome_color</item>
     -->
</style>

Solution 3

Tried all suggestions above. The only way that I managed to change the color of navigation icon default Back button arrow in my toolbar is to set colorControlNormal in base theme like this. Probably due to the fact that the parent is using Theme.AppCompat.Light.NoActionBar

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>

Solution 4

Need to add a single attribute to your toolbar theme -

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/arrow_color</item>
</style>

Apply this toolbar_theme to your toolbar.

OR

you can directly apply to your theme -

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/arrow_color</item> 
  //your code ....
</style>

Solution 5

Just add

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

to your current app theme.

View more solutions

Comments

[ban-geoengineering]

None of the XML-based answers so far have solved this issue for me, but I have successfully used your homeAsUpIndicator / @drawable/abc_ic_ab_back_mtrl_am_alpha code to make the back arrow white. I prefer this than hacking into the Java.

[f470071]

Old but still. Are (were) you using ActionBar or the new Toolbar?

[android developer]

The default one is supposed to be a bit gray, by using android:theme="@style/Widget.AppCompat.Light.ActionBar" inside the Toolbar XML tag. Its color is #737373

[Sakiboy]

Check my answer - it is super simple and has no side-effects.

[Ferran Maylinch]

I already tried that and the arrow is black. Note this arrow is not the same arrow you see when you open the drawer (that arrow IS affected by the color attribute). The drawer arrow is a bit bigger.

[Flávio Faria]

So, it seems you'll have to provide your own drawable resource. You can generate it using this tool: shreyasachar.github.io/AndroidAssetStudio

[Daniel Ochoa]

This should be the accepted answer. Thank you for this. Question, I'm unable to find the style for coloring the arrow shown when SearchView is expanded. Any clue? It apparently isn't affected by this answer.

[Seraphim's]

I need to add also <item name="android:colorControlNormal">...</item> with the android: prefix

[Joris]

This is the only thing that worked for me without changing the tint off all other widgets with colorControlNormal

[luthier]

Works like a charm! :)

[gphilip]

Unfortunately this is a level 21 API and if you want to support anything below it won't work.

[dabluck]

problem with this solution is it paints all your other back arrows, if you only want to change one and leave the rest white

[wbk727]

What about the colour of the overflow dots?

[Sergey Shustikov]

cant find R.color.grey what is the color?

[pdegand59]

SRC_ATOP helped me there ! Thanks

[sk1pro99]

@ssh you have to define the a string attribute in your colors.xml file(in res/values) with the name as grey as follows <color name="grey">#808080</color>

[Sid]

@Carles, it coloured the back arrow white alright. But now it doesn't function properly! It doesn't go back to the previous activity!

[mrroboaat]

It works. Please note you should use ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha) because getResources.getDrawable(int) is deprecated

[Neo]

It's better to change the color of arrow rather than using images. The attribute colorControlNormal decides the color of arrow. So change this attribute in your toolbar custom theme and enjoy :)

[Rohan Kandwal]

Simplest answer of all, instead of fiddling around with other code, just add this line in your style.xml

[Pavan]

for problem where it changes all back arrow color in application you can use mutate().. upArrow.mutate().setColorFilter(getResources().getColor(R.co‌​lor.white), PorterDuff.Mode.SRC_ATOP);

[Mauker]

Another possible solution would be for you to get that resource yourself and put it on your drawable folders :)

[android developer]

how do i also customize the selector of the background of the up-button ?

[kellogs]

Worked, but with a tweak. Instead of using colorControlNormal as rockgecko suggested I threw it inside <style name="AppTheme.NoActionBar"> which is then applied per activity.

[Jason Robinson]

If your parent theme derives from one of the "NoActionBar" themes, then setting colorControlNormal on the root theme rather than in the actionBarTheme is the route to go.

[jdonmoyer]

ContextCompat.getColor() should also be used instead of getResources().getColor()

[Jon]

Note that abc_ic_ab_back_mtrl_am_alpha changed to abc_ic_ab_back_material in the 23.2.0 support library

[Adnan Ali]

remember that colorControlNormal requires API 21

[YawaraNes]

In my case, the drawable resource is private and I can't use it, so I solved it using this another solution that worked for me (using styles only): stackoverflow.com/a/28631979/2969811

[Vicky Chijwani]

@AdnanAli if you're using AppCompat it'll work on < API 21 as well. Clearly, AppCompat is being used here because colorControlNormal is not prefixed with android:.

[Bron Davies]

It only took me 2 hours of searching and failing and searching again to finally get to this. Sometimes the style 'system' in android drives me nuts! This method is especially important to use when you have one activity that doesn't use the same styling as the others.

[Hiren]

Expected answer Thank you

[Khaled Saifullah]

Note that, if you are using toolbar with theme ".NoActionBar", then getSupportActionBar().setHomeAsUpIndicator(upArrow); won't work. Use toolbar.setNavigationIcon(upArrow); then

[Bruce]

But this changes the tint off all other widgets as well.. any way not to affect other widgets such as checkbox and radio buttons?

[King King]

Trying the accepted answer (maybe the most popular solution found on the net) does not work for me but this one works :) so crazy when programming with Android.

[Rahul Hawge]

Brilliant... I tried all the about answers to add it in the theme but it did not work... As you mentioned, I had android:theme="@style/ThemeOverlay.AppCompat.ActionBar" property in my tool bar. Once I removed it, it started working.

[SimplyProgrammer]

Simplest answer. This works without changing other control themes. All you need is to set the custom toolbar theme to your toolbar. :)

[f470071]

Is this relevant to old ActionBar or new Toolbar?

[Narendra Singh]

It should be abc_ic_ab_back_material, instead of abc_ic_ab_back_mtrl_am_alpha.

[Antek]

This should be the accepted answer, imho - it targets just the arrow, gets the arrow to set using simplest means, and is compatible also below API 21

[Pavan]

this will not work when you upgrade support design version

[P. Savrov]

Setting the {@link #DISPLAY_HOME_AS_UP} display option will automatically enable the home button.

[TheJudge]

If you seek more custom solution (different colors for titles and menu icons in my case) then this is the solution you want

[Udi Oshi]

This is changing the android.support.v7.widget.AppCompatCheckBox color also

[rrbrambley]

Note that you might need to call this before attempting to call getNavigationIcon(): getSupportActionBar().setDisplayHomeAsUpEnabled(true);

[CoolMind]

Though this solution works, Lint will show a warning, so I applied a solution with getNavigationIcon() here.

[Aba]

Oh the pains you have to go through to change the color of just 1 icon.. The first one works for me. The 2nd one works for custom Toolbars (and other things too apparently). 3 years later, many thanks Neo.

[daka]

@JasonRobinson Your comment worked for me, thanks +1. This answer however, did not, not sure why.

[daka]

But this also changes the colour of other controls, like radio buttons and the line under text edit.

[daka]

Future readers, make sure you do supportActionBar?.setDisplayHomeAsUpEnabled(true) before doing toolbar?.navigationIcon?.setColorFilter(ContextCompat.getCol‌​or(this,android.R.co‌​lor.white), PorterDuff.Mode.SRC_ATOP)

[Henry]

Changing theme to Xxx.NoActionBar causes NPE on "getSupportActionBar".

[Harry Aung]

@Henry NoActionBar theme won't provide default action bar. So you need to setup your own toolbar by like so setSupportActionBar(toolbar) where toolbar is the one you setup in xml.

[shariful islam]

The best answer! Thank you.

[John T]

Excellent! Best solution.

[Johnny]

Great answer! I saved me the whole life.

[Dhaval Patel]

Buddy, You saved my day. I spent the whole day on this one only. I wish I can give you more votes.

[Pushpendra]

How to change colour of @drawable/your_drawable_icon as per our theme colour?

[famfamfam]

not working to me

[famfamfam]

not working to me, i dont know why?