[Android] Customizing the Action Bar

Posted by Tim Bray on 13 April 2011 at 2:28 PM

[This post is by , 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  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.

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

This step is easy; I’ll use the wonderful  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:

name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
    name="android:background">@drawable/ad_spinner_background_holo_light
    name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light
    name="android:dropDownSelector">@drawable/ad_selectable_background

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:

name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
    name="android:background">@drawable/actionbar_tab_bg
    name="android:paddingLeft">32dp
    name="android:paddingRight">32dp
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 overridingandroid:selectableItemBackground and setting a shape drawable with our desired colouring:

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

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:

name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
    name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light

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

name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
    name="android:listSelector">@drawable/ad_selectable_background

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:

name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light
name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_lightBackground

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 theandroid:background item on the android:actionBarStyle style:

name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    name="android:background">@drawable/action_bar_background
Bringing it all together

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

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

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

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  which exercises the functionality offered by the Action Bar and demonstrates how to theme it.