Ferran Maylinch Ferran Maylinch - 3 months ago 45
Android Question

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

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

Black back arrow

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
.

Answer

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.