Styling the ActionBar – Part 2

In the previous article we used Jeff Gilfelt’s Android ActionBar Style Generator to create some assets and we set up our base Theme. In this article we’ll look at building up our styles to get the ActionBar looking how we would like it.

The first thing that we need to do is set up the basic colour values in res/values/colors.xml that we used in Jeff’s Generator tool:

The ActionBar consists of a number of components such as the overflow menu, navigation tabs or spinners in addition to any custom views or layouts which we may add. We’ll cover those other components in due course, but for now we’ll concentrate on the ActionBar itself. For this we need to create a new style, which we’ll call “ActionBar” in res/values/styles.xml:

Now we must set this style on the ActionBar by adding an actionBarStyle to the theme in res/values/styles.xml:

If we run this we can see that the ActionBar itself and the background of the split Tab control are now correctly set, although we still need to work on some of the other components:

ActionBar Styling

It is worth noting that the icons for both the toggle and overflow menus (the direction sign and three vertical dots, respectively) have taken on the hue of the background. This is because these system icons are semi-transparent, and so allow the background colour to show through. For more information on how to use transparency in this manner, please see the series of articles on Transparency.

Another thing worth mentioning is that Jeff’s tool created an asset for a ProgressBar. We’re not using a ProgressBar in the example so we’ll skip this, but if you want to include it just add the following to the ActionBar style that we created earlier:

Then create a new style:

And copy across res/drawable/progress_horizontal_stylingactionbar.xml and the various assets in res/drawable-*/progress*.png.

The next thing that we’ll look at is how to apply the accent colour to the Tb control. Once again we need to define a new style in res/values/styles.xml:

For this to build we’ll need to copy a number of resources from the zip that we downloaded from Jeff’s tool. Firstly res/drawable/tab_indicator_ab_stylingactionbar.xml, and the various files that this references which are in all of the drawable-mdpi, drawable-hdpi, and drawable-xhdpi directories (we’ll need to copy each in to it’s respective folder in our project), and represents the various selection states: tab_selected_stylingactionbar, tab_unselected_focused_stylingactionbar, tab_selected_focused_stylingactionbar, tab_unselected_pressed_stylingactionbar, and tab_selected_pressed_stylingactionbar.

And, once again, we assign this style in the theme:

Our Tab control now has the correct accents, and this works in landscape as well:

However, that picture shows that the overflow menu has not got any style applied. In the next article in this series we’ll look at applying our style to the overflow menu and the Dropdown navigation.

The source code for this article can be found here.

© 2012 – 2014, Mark Allison. All rights reserved. This article originally appeared on Styling Android.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License

Creative Commons License
Styling the ActionBar – Part 2 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.

Tags: ,

7 Responses to “Styling the ActionBar – Part 2”

  1. [...] Styling Android: Styling the ActionBar – Part 2 [...]

  2. Larry says:

    Is it possible to also change the height of the tabs? If so, how?

  3. sumedh says:

    yes. it is possible to change the height of tab bar. By default it is the size of actionbar. By changing the android:actionBarSize you can change the height. If you don’t want that then set custom view for actionbar

  4. jrodriguez says:

    Great post, many thanks & just one small correction. The file referred to as res/drawable/tab_indicator_ab_stylingactionbar.png should be res/drawable/tab_indicator_ab_stylingactionbar.xml

  5. Sai says:

    Hi, In Landscape mode how to resize the tabs to use 100% of the screen width instead of all shifting to left.

Leave a Reply