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:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="sa_green">#14a804</color>
    <color name="stacked_green">#118504</color>
    <color name="accent_green">#97e08f</color>

</resources>

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:

    <style name="ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/sa_green</item>
        <item name="android:backgroundStacked">@color/stacked_green</item>
        <item name="android:backgroundSplit">@color/sa_green</item>
    </style>

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

<resources>

    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/ActionBar</item>
    </style>
    .
    .
    .
</resources>

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:

<item name="android:progressBarStyle">@style/ProgressBar</item>

Then create a new style:

    <style name="ProgressBar" parent="@android:style/Widget.Holo.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_stylingactionbar</item>
    </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:

    <style name="ActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:background">@drawable/tab_indicator_ab_stylingactionbar</item>
    </style>

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:

<resources>

    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/ActionBar</item>
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    </style>
    .
    .
    .
</resources>

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

Send the author to the moon!

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

6 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

Leave a Reply