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    lt  -- Base application theme -- gt   lt style name  AppTheme  parent  Theme AppCompat Light  gt        lt item name  android actionBarStyle  tools ignore  NewApi  gt  style MyActionBar lt  item gt       lt item name  actionBarStyle  gt  style MyActionBar lt  item gt        lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt        lt item name  homeAsUpIndicator  gt  drawable abc ic ab back mtrl am alpha lt  item gt       lt item name  android homeAsUpIndicator  tools ignore  NewApi  gt  drawable abc ic ab back mtrl am alpha lt  item gt   lt  style gt    lt  -- ActionBar style -- gt   lt style name  MyActionBar  parent   style Widget AppCompat Light ActionBar Solid  gt        lt item name  android background  gt  color actionbar background lt  item gt       lt  -- Support library compatibility -- gt       lt item name  background  gt  color actionbar background lt  item gt   lt  style gt    lt  -- Style for the navigation drawer icon -- gt   lt style name  DrawerArrowStyle  parent  Widget AppCompat DrawerArrowToggle  gt       lt item name  spinBars  gt true lt  item gt       lt item name  color  gt  color actionbar text lt  item gt   lt  style gt    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

User · Accepted 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   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

User · Answer

The simplest  and best  way to change the color of the back up-arrow  Best part is that there are no side-effects  unlike the other answers    Create a style with parent Widget AppCompat DrawerArrowToggle  define the color and any other attributes you d like  Set the style on the drawerArrowStyle attribute in the apps Theme   Create style   lt style name  quot DrawerArrowStyle quot  parent  quot Widget AppCompat DrawerArrowToggle quot  gt       lt  --        Set that the nav buttons will animate-- gt       lt item name  quot spinBars quot  gt true lt  item gt       lt  --        Set the color of the up arrow   hamburger button-- gt       lt item name  quot color quot  gt  color white lt  item gt   lt  style gt   Set the style in App Theme   lt  -- Base application theme  -- gt   lt style name  quot AppTheme quot  parent  quot Theme MaterialComponents Light NoActionBar quot  gt       lt item name  quot colorPrimary quot  gt  color colorPrimary lt  item gt       lt item name  quot colorPrimaryDark quot  gt  color colorPrimaryDark lt  item gt       lt item name  quot colorAccent quot  gt  color colorAccent lt  item gt        lt  --  Change global up-arrow color with no side-effects    -- gt       lt item name  quot drawerArrowStyle quot  gt  style DrawerArrowStyle lt  item gt   lt  style gt   To change the ToolBar text color  and other attributes   create this style   lt style name  quot ToolbarStyle quot  parent  quot Widget AppCompat Toolbar quot  gt       lt item name  quot android textColor quot  gt  color white lt  item gt       lt item name  quot titleTextColor quot  gt  color white lt  item gt       lt item name  quot colorControlNormal quot  gt  color white lt  item gt   lt  -- colorControlNormal is Probably not necessary    -- gt   lt  style gt   Then set that style on the AppTheme   lt  -- Base application theme  -- gt   lt style name  quot AppTheme MyProduceApp quot  parent  quot Theme MaterialComponents Light NoActionBar Bridge quot  gt       lt item name  quot colorPrimary quot  gt  color colorPrimary lt  item gt       lt item name  quot colorPrimaryDark quot  gt  color colorPrimaryDark lt  item gt       lt item name  quot colorAccent quot  gt  color colorAccent lt  item gt        lt  --  Style the toolbar  mostly the color of the text  -- gt       lt item name  quot toolbarStyle quot  gt  style ToolbarStyle lt  item gt       lt  --  Change color of up-arrow    -- gt       lt item name  quot drawerArrowStyle quot  gt  style DrawerArrowStyle lt  item gt   lt  style gt

User · Answer

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  lt item name  colorControlNormal  gt  color my awesome color lt  item gt  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    lt style name  MyTheme  parent  Theme AppCompat Light  gt               lt item name  actionBarTheme  gt  style MyApp ActionBarTheme lt  item gt       lt item name  actionBarStyle  gt  style MyApp ActionBar lt  item gt       lt  -- color for widget theming  eg EditText  Doesn t effect ActionBar  -- gt       lt item name  colorControlNormal  gt  color my awesome color lt  item gt       lt  -- The animated arrow style -- gt       lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt   lt  style gt    lt style name  MyApp ActionBarTheme  parent   style ThemeOverlay AppCompat ActionBar  gt              lt  -- THIS is where you can color the arrow  -- gt       lt item name  colorControlNormal  gt  color my awesome color lt  item gt   lt  style gt    lt style name  MyApp ActionBarStyle  parent   style Widget AppCompat Light ActionBar  gt       lt item name  elevation  gt 0dp lt  item gt             lt  -- style for actionBar title -- gt         lt item name  titleTextStyle  gt  style ActionBarTitleText lt  item gt       lt  -- style for actionBar subtitle -- gt         lt item name  subtitleTextStyle  gt  style ActionBarSubtitleText lt  item gt        lt  --      the actionBarTheme doesn t use the colorControlNormal attribute      lt item name  colorControlNormal  gt  color my awesome color lt  item gt       -- gt   lt  style gt

User · Answer

if use Toolbar you can try this  Drawable drawable   toolbar getNavigationIcon    drawable setColorFilter ContextCompat getColor appCompatActivity  colorId   PorterDuff Mode SRC ATOP

User · Answer

Solution is very simple  Just put following line into your style named as AppTheme    lt item name  colorControlNormal  gt  color white lt  item gt    Now your whole xml code will look like shown below  default style     lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt            lt item name  colorPrimary  gt  0F0F0F lt  item gt           lt item name  android statusBarColor  gt  EEEEF0 lt  item gt           lt item name  android windowLightStatusBar  gt true lt  item gt           lt item name  colorAccent  gt  color colorAccent lt  item gt           lt item name  android windowActivityTransitions  gt true lt  item gt            lt item name  colorControlNormal  gt  color white lt  item gt   lt  style gt

User · Answer

The answer by Carles is the correct answer  but few of the methods like getDrawable    getColor   got deprecated at the time I am writing this answer  So the updated answer would be  Drawable upArrow   ContextCompat getDrawable context  R drawable abc ic ab back mtrl am alpha   upArrow setColorFilter ContextCompat getColor context  R color white   PorterDuff Mode SRC ATOP   getSupportActionBar   setHomeAsUpIndicator upArrow       Following some other stackoverflow queries I found that calling ContextCompat getDrawable   is similar to  if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP        return resources getDrawable id  context getTheme       else       return resources getDrawable id         And ContextCompat getColor   is similar to   public static final int getColor Context context  int id        final int version   Build VERSION SDK INT      if  version  gt   23            return ContextCompatApi23 getColor context  id         else           return context getResources   getColor id             Link 1  ContextCompat getDrawable    Link 2  ContextCompat getColor

User · Answer

Need to add a single attribute to your toolbar theme -    lt style name  toolbar theme  parent   style ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  colorControlNormal  gt  color arrow color lt  item gt   lt  style gt    Apply this toolbar theme to your toolbar   OR   you can directly apply to your theme -    lt style name  CustomTheme  parent  Theme AppCompat Light NoActionBar  gt     lt item name  colorControlNormal  gt  color arrow color lt  item gt       your code       lt  style gt

User · Answer

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     lt style name  BaseTheme  parent  Theme AppCompat Light NoActionBar  gt     lt item name  colorControlNormal  gt  color white lt  item gt       the rest of your codes     lt  style gt

User · Answer

try this  public void enableActionBarHomeButton AppCompatActivity appCompatActivity  int colorId        final Drawable upArrow   ContextCompat getDrawable appCompatActivity  R drawable abc ic ab back material       upArrow setColorFilter ContextCompat getColor appCompatActivity  colorId   PorterDuff Mode SRC ATOP        android support v7 app ActionBar mActionBar   appCompatActivity getSupportActionBar        mActionBar setHomeAsUpIndicator upArrow       mActionBar setHomeButtonEnabled true       mActionBar setDisplayHomeAsUpEnabled true       function call   enableActionBarHomeButton this  R color white

User · Answer

This is what worked for me   Add the below attributes to your theme   To change toolbar actionbar back arrow above api 21   lt item name  android homeAsUpIndicator  gt  drawable your drawable icon lt  item gt    To change toolbar actionbar back arrow below api 21   lt item name  homeAsUpIndicator  gt  drawable your drawable icon lt  item gt    To change action mode back arrow   lt item name  actionModeCloseDrawable  gt  drawable your drawable icon lt  item gt    To remove toolbar actionbar shadow   lt item name  android elevation  tools targetApi  lollipop  gt 0dp lt  item gt   lt item name  elevation  gt 0dp lt  item gt   lt  --backward compatibility-- gt   lt item name  android windowContentOverlay  gt  null lt  item gt    To change actionbar overflow drawable   lt  --under theme-- gt   lt item name  actionOverflowButtonStyle  gt  style MenuOverflowStyle lt  item gt    lt style name  MenuOverflowStyle  parent  Widget AppCompat ActionButton Overflow  gt   lt item name  srcCompat  gt  drawable ic menu overflow lt  item gt      Note    srcCompat  is used instead of  android src  because of vector drawable support for api below 21

User · Answer

I just changed the toolbar theme to be  style ThemeOverlay AppCompat Light   and the arrow became dark gray               lt android support v7 widget Toolbar             android id    id toolbar              android layout width  match parent              android layout height   attr actionBarSize              android gravity  center              app layout collapseMode  pin              app theme   style ThemeOverlay AppCompat Light  gt

User · Answer

Here s how I did it in Material Components    lt style name  AppTheme  parent  Theme MaterialComponents DayNight NoActionBar  gt       lt item name  drawerArrowStyle  gt  style AppTheme DrawerArrowToggle lt  item gt   lt  style gt    lt style name  AppTheme DrawerArrowToggle  parent  Widget AppCompat DrawerArrowToggle  gt       lt item name  color  gt  android color white lt  item gt   lt  style gt

User · Answer

Unless there s a better solution     What I did is to take the  drawable abc ic ab back mtrl am alpha images  which seem to be white  and paint them in the color I desire using a photo editor

User · Answer

We were running into the same problem and all we wanted was to set the app collapseIcon attribute in the toolbar in the end  which we did not find since it is not very well documented     lt android support v7 widget Toolbar          android id  quot   id toolbar quot           android layout width  quot match parent quot           android layout height  quot  dimen toolbarHeight quot           app collapseIcon  quot  drawable collapseBackIcon quot    gt

User · Answer

Use below method   private Drawable getColoredArrow         Drawable arrowDrawable   getResources   getDrawable R drawable abc ic ab back mtrl am alpha       Drawable wrapped   DrawableCompat wrap arrowDrawable        if  arrowDrawable    null  amp  amp  wrapped    null               This should avoid tinting all the arrows         arrowDrawable mutate            DrawableCompat setTint wrapped  Color GRAY              return wrapped      Now you can set the drawable with   getSupportActionBar   setHomeAsUpIndicator getColoredArrow

User · Answer

You can change the color of the navigation icon programmatically like this   mToolbar setNavigationIcon getColoredArrow       private Drawable getColoredArrow             Drawable arrowDrawable   getResources   getDrawable R drawable abc ic ab back mtrl am alpha           Drawable wrapped   DrawableCompat wrap arrowDrawable            if  arrowDrawable    null  amp  amp  wrapped    null                   This should avoid tinting all the arrows             arrowDrawable mutate                    DrawableCompat setTintList wrapped  ColorStateList valueOf this getResources   getColor R color your color                                      return wrapped

User · Answer

Change Menu Nav Icon Color    In style xml     lt style name  MyMaterialTheme Base  parent  Theme AppCompat Light DarkActionBar  gt       lt item name  windowNoTitle  gt true lt  item gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorAccent lt  item gt       lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt       lt item name  android textColor  gt  color colorAccent lt  item gt     lt  style gt    lt style name  DrawerArrowStyle  parent   style Widget AppCompat DrawerArrowToggle  gt       lt item name  spinBars  gt true lt  item gt       lt item name  color  gt  color colorPrimaryDark lt  item gt   lt  style gt         In Mainfests xml     lt activity android name   MainActivity          android theme   style MyMaterialTheme Base  gt  lt  activity gt

User · Answer

On compileSdkVersoin 25  you could do this   styles xml   lt style name  AppTheme  parent  Theme AppCompat Light  gt        lt item name  android textColorSecondary  gt  color your color lt  item gt   lt  style gt

User · Answer

I found a solution that works pre Lollipop   Set the  colorControlNormal  within the  actionBarWidgetTheme  to change the homeAsUpIndicator color   Modifying rockgecko s answer from above to look like this    lt style name  MyTheme  parent  Theme AppCompat Light  gt               lt item name  actionBarTheme  gt  style MyApp ActionBarTheme lt  item gt       lt item name  actionBarStyle  gt  style MyApp ActionBar lt  item gt       lt  -- color for widget theming  eg EditText  Doesn t effect ActionBar  -- gt       lt item name  colorControlNormal  gt  color my awesome color lt  item gt       lt  -- The animated arrow style -- gt       lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt       lt  -- The style for the widgets on the ActionBar  -- gt       lt item name  actionBarWidgetTheme  gt  style WidgetStyle lt  item gt   lt  style gt    lt style name  WidgetStyle  parent  style ThemeOverlay AppCompat Light  gt       lt item name  colorControlNormal  gt  color my awesome color lt  item gt   lt  style gt

User · Answer

As said on most of the previous comments  the solution is to add    lt item name  colorControlNormal  gt  color white lt  item gt   to your app theme   But confirm that you don  t have another theme defined in your Toolbar element on your layout         lt android support v7 widget Toolbar             android id    id toolbar              android layout width  match parent              android layout height   attr actionBarSize              android background   attr colorPrimary              android elevation  4dp              android theme   style ThemeOverlay AppCompat ActionBar              app popupTheme   style ThemeOverlay AppCompat Light    gt

User · Answer

Another solution that might work for you is to not declare your toolbar as the app s action bar   by setActionBar or setSupportActionBar   and set the back icon in your onActivityCreated using the code mentioned in another answer on this page  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   toolbar setNavigationIcon upArrow     Now  you will not get the onOptionItemSelected callback when you press the back button  However  you can register for that using setNavigationOnClickListener  This is what i do    toolbar setNavigationOnClickListener new View OnClickListener          Override     public void onClick View view            getActivity   onBackPressed      or whatever you used to do on your onOptionItemSelected s android R id home callback             I m not sure if it will work if you work with menu items

User · Answer

Just remove android homeAsUpIndicator and homeAsUpIndicator from your theme and it will be fine  The color attribute in your DrawerArrowStyle style must be enough

User · Answer

Just add    lt item name  colorControlNormal  gt  color white lt  item gt     to your current app theme

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

Examples related to java

Examples related to android

Examples related to user-interface

Examples related to colors

Examples related to android-styles