Customizing the Action Bar

[This post is by Nick Butcher, an Android engineer who notices small imperfections, and they annoy him. — Tim Bray]

Since the introduction of the Action Bar design pattern, many applications have adopted it as a way to provide easy access to common actions. In Android 3.0 (or Honeycomb to its friends) this pattern has been baked in as the default navigation paradigm and extended to take advantage of the extra real-estate available on tablets. By using the Action Bar in your Honeycomb-targeted apps, you'll give your users a familiar way to interact with your application. Also, your app will be better prepared to scale across the range of Android devices that will be arriving starting in the Honeycomb era.

Just because Action Bars are familiar, doesn’t mean that they have to be identical! The following code samples and accompanying project demonstrate how to style the Action Bar to match your application’s branding. I’ll demonstrate how to take Honeycomb’s Holo.Light theme and customise it to match this blog’s colour scheme.

<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
…
</style>

Icon

This step is easy; I’ll use the wonderful Android Asset Studio to create an icon in my chosen colour scheme. For extra credit, I’ll use this image as a starting point to create a more branded logo.

Navigation

Next up, the navigation section of the Action Bar operates in three different modes; I’ll tackle each of these in turn.

Standard

The Action Bar’s standard navigation mode simply displays the title of the activity. This doesn’t require any styling... next!

List

To the left, a standard list drop-down; to the right, the effect we want to achieve.

The default styling in list navigation mode has a blue colour scheme. This is evident when touching the collapsed control in both the top bar, and the selection highlight in the expanded list. We can theme this element by overriding android:actionDropDownStyle with a custom style to implement our colour scheme:

<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
    <item name="android:background">@drawable/ad_spinner_background_holo_light</item>
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
    <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>

The above uses a combination of state list drawables and 9 patch images to style the collapsed spinner, the top bar of the expanded list and sets the highlight colour when picking an item.

Tabs

Here are the before-and-after shots on the tab navigation control:

The tab navigation control uses the standard blue colouring. We can apply a custom style to android:actionBarTabStyle to set our own custom drawable that uses our desired palette:

<!-- style for the tabs -->
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
    <item name="android:background">@drawable/actionbar_tab_bg</item>
    <item name="android:paddingLeft">32dp</item>
    <item name="android:paddingRight">32dp</item>
</style>

Actions

Before-and-after on the individual items in the Action Bar:

The individual action items inherit the default blue background when selected. We can customise this behaviour by overriding android:selectableItemBackground and setting a shape drawable with our desired colouring:

<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>

The overflow menu also needs some attention as when expanded it shows a blue bar at the top of the list. We can override android:popupMenuStyle and set a custom drawable (in fact the very same drawable we previously used for list navigation) for the top of the overflow menu:

<!-- style the overflow menu -->
<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> 
</style>

Selecting items within the overflow menu also show the default selection colour. We can set our customised selection colour by overriding android:dropDownListViewStyle:

<!-- style the items within the overflow menu -->
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
    <item name="android:listSelector">@drawable/ad_selectable_background</item>
</style>

These changes gets us most of the way there but it’s attention to detail that makes an app. Check boxes and radio buttons within menu items in the overflow section are still using the default assets which have a blue highlight. Let’s override them to fit in with our theme:

<item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>

Background

I’ve left the background transparent as inheriting form Holo.Light works well for our desired palette. If you’d like to customise it you easily override the android:background item on the android:actionBarStyle style:

<style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
</style>

Bringing it all together

Putting all of these components together we can create a custom style:

<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
    <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
    <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
    <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
    <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
</style>

We can then apply this style to either an individual activity or to the entire application:

<activity android:name=".MainActivity" 
          android:label="@string/app_name"
          android:theme="@style/Theme.AndroidDevelopers"
          android:logo="@drawable/ad_logo">

Note that some of the system styles that we have overridden in this example will affect much more than the Action Bar. For example overriding android:selectableItemBackground will effect many widgets which support a selectable state. This is useful for styling your entire application but be sure to test that your customisations are applied consistently throughout.

Familiar but styled

Customising the action bar is a great way to extend your application’s branding to the standard control components. With this power, as they say, comes great responsibility. When customising the user interface you must take great care to ensure that your application remains legible and navigable. In particular, watch out for highlight colours which contrast poorly with text and provide drawables for all relevant states. Explore this demo application which exercises the functionality offered by the Action Bar and demonstrates how to theme it.