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

android toolbar back button icon change
change color of back arrow in toolbar android
android change toolbar icon color programmatically
change toolbar back color
back arrow icon color android
android home back button color
change navigation button color android
how to change toolbar icon color in android

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>

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

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.

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

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.


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

How to change toolbar back arrow color and title color? · GitHub, 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  How to Change Action Bar Background Color and Title color | Android App Development video#15 how to change color theme, how to change color of the back arrow in the new material theme

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.


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


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

android How to change color of the back arrow in the new material , <style name="SearchToolbar" parent="Theme.AppCompat.Light.NoActionBar">. /​/toolbar back arrow color mToolbar.setNavigationOnClickListener(new View. I'm using new android appcompat toolbar. I need to set the same custom color to both burger icon and back arrow icons. Using drawerArrowStyle allows me to change burger icon but not the arrow.

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

How to Show Android Toolbar Back Button programmatically in , 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. 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.

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>

Apply this toolbar_theme to your toolbar.


you can directly apply to your theme -

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

Buttons: floating action button, android How to change color of the back arrow in the new material theme? <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item  You can achieve it through code. Obtain the back arrow drawable, modify its color with a filter, and set it as back button.

Just add

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

to your current app theme.

Applying color to UI, We try to change color and Shape of a back button too. Step 2: Use the new theme created above for the Toolbar component in our layout as below. We have​  Change the color of the back arrow icon from black to white by adding white color code inside (android:fillColor) like this: android:fillColor="#ffffff" Open ( ) file and let’s define the toolbar, set the app name to be shown in the toolbar as well as the back arrow icon like this:

Mastering Android Application Development, A floating action button (FAB) represents the primary action for a screen. Morphing should be reversible and transform the new surface back into the FAB. The Material Design color system can help you create a color theme that reflects  Color usage and palettes. The Material Design color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.

To emphasize the difference between app bars and other surfaces, use a secondary color on nearby components such as the floating action button (FAB). A primary color is the color displayed most frequently across your app's screens and components. The baseline Material Design dark theme uses the 200 tone of the primary color (passing the WCAG's AA standard of at least 4.5:1 for normal text, at all elevation surfaces). A sample primary palette in a dark theme.

We just need to style the app a bit more by changing colors and adding padding to the image; we can change the colors of the theme in styles.xml: <resources> <! The one called back navigation is the navigation performed with the back button, [ 122 ] CardView and Material Design Back navigation and up navigation.

  • 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.
  • Old but still. Are (were) you using ActionBar or the new Toolbar?
  • 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
  • This is the only thing that worked for me without changing the tint off all other widgets with colorControlNormal
  • problem with this solution is it paints all your other back arrows, if you only want to change one and leave the rest white
  • 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
  • Another possible solution would be for you to get that resource yourself and put it on your drawable folders :)
  • Note that abc_ic_ab_back_mtrl_am_alpha changed to abc_ic_ab_back_material in the 23.2.0 support library
  • 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.
  • I need to add also <item name="android:colorControlNormal">...</item> with the android: prefix
  • Unfortunately this is a level 21 API and if you want to support anything below it won't work.
  • 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.