An Android Toolbar and Action Bar Color Guide

The following is a guide of toolbar and action bar coloring rules that were learned through trial and error. It assumes the use of the support library toolbar (android.support.v7.widget.Toolbar) and results may vary.

Coloring methods that involve changing icons or using programming instructions were not included (except for a single instance that I thought was simple and valuable enough to include.)

The base application style used is Theme.AppCompat.Light.DarkActionBar. Styles and attributes are referred to using the names seen in the snippets and the item name. For example:

  • AppTheme refers to <style name="AppTheme"></style>
  • ActionbarTheme refers to <style name="ActionbarTheme"></style>
  • AppTheme.actionModeBackground refers to:
<style name="AppTheme">

  <item name="actionModeBackground"></item>

</style>

The Action Bar

The action bar is styled using actionBarTheme and actionBarPopupTheme.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="actionBarTheme">@style/ActionbarTheme</item>
    <item name="actionBarPopupTheme">@style/ActionbarPopupTheme</item>

</style>

The default action bar is gray with white controls, black icons and a border that has the color of @color/colorAccent. Setting actionBarTheme to an empty style makes it white with gray controls.

Default appearance.
After overriding actionBarTheme.

To change the background color use AppTheme.actionModeBackground. It doesn’t seem to support raw color strings (#009688) but does support references (@color/colorName). It also changes the border color.

To change the color of the border use ActionbarTheme.colorAccent.

To change the color of the home icon and the overflow icon use ActionbarTheme.colorControlNormal.

To change the color of the home icon, the overflow icon and the menu icons, use ActionbarTheme.android:tint.

For situations where it is necessary to change the tint of menu icons programmatically, use:

void tintMenuIcons(Menu menu)
{
  MenuItem item;
  int color;
  
  AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

  for(int i = 0; i < menu.size(); i++)
  {
    item  = menu.getItem(i);
    color = Color.parseColor("#009688");

    DrawableCompat.setTint(item.getIcon(), color);
  }
}

The code would typically be added at the end of onCreateOptionsMenuor onCreateActionMode.

For this to work,vectorDrawables.useSupportLibrary = true must be added to the application gradle file under defaultConfig.

To change the background color of the overflow menu use ActionbarPopupTheme.android:background.

To change the text color of the overflow menu use ActionbarPopupTheme.android:textColor.

The Toolbar

The toolbar is styled using styletheme and popupTheme. It is possible to set both theme and popupTheme within the style block.

<style name="ToolbarStyle">

    <item name="popupTheme">@style/ToolbarPopupTheme</item>
    <item name="theme">@style/ToolbarTheme</item>

</style>

The default toolbar has the background color of @color/colorPrimary with white text, white controls and black icons. Setting theme to an empty style and clearing background makes it white with gray controls.

Default appearance
After overriding theme and background.

To change the background color use ToolbarStyle.android:background.

To change the text color and subtitle text color use ToolbarStyle.titleTextColor and ToolbarStyle.subtitleTextColor respectively.

To change the color of the home icon and the overflow icon use ToolbarTheme.colorControlNormal. 

This has the unintended effect of also changing the corresponding icons on the action bar. This can be fixed by explicitly setting ActionbarTheme.colorControlNormal which will override the toolbar attributes.

To change the color of the home icon, the overflow icon and the menu icons, use ToolbarTheme.android:tint.

This has the unintended effect of also changing the corresponding icons on the action bar. This can be fixed by explicitly setting ActionbarTheme.android:tint which will override the toolbar attributes.

To change the background color of the overflow menu use ToolbarPopupTheme.android:background.

To change the text color of the overflow menu use ToolbarPopupTheme.android:textColor.

The end. Hopefully this will help you get your bars under control.


Follow me on Twitter to receive similar content straight to your timeline and checkout the GitHub for open-source projects.

5 Replies to “An Android Toolbar and Action Bar Color Guide”

  1. > For this to work,vectorDrawables.useSupportLibrary = true must be added to the application gradle file under defaultConfig.

    Is this still true if minSdkVersion is >= 23?

  2. Thanks. I wonder though whether the support library might fix bugs in the platform code – a bit like how it’s generally better to use AppCompatActivity whatever your minSdkVersion.

    1. Possibly. There are also situations where you end up needing some feature of the support library later during production then enabling some of the features or using some of the classes might lead to crashing with exceptions that don’t make it obvious what the problem is. That is also fixed by defaulting to using the support library so I always use it.

Leave a Reply

Your email address will not be published. Required fields are marked *