Styling the ActionBar – Part 6

In the previous article we got the styling of our ActionBar almost complete – all that’s left to do is apply a style to the ActionMode. In this article we’ll do precisely that.

Applying a style to the ActionMode is actually quite easy and is simply a case of defining drawables for actionModeBackground (and, if our ActioMode was to split on to a second line actionModeSplitBackground) in our theme. The problem that we have is we do not have assets for these. At the time of writing neither Jeff Gilfelt’s ActionBar Style Generator nor Jérôme Van Der Linden’s Android Holo Colors Generator will create assets which matches those used by the default holo theme which can be viewed here and here. For those who are adept with image manipulation tools such as Photoshop or Gimp it is relatively straightforward to change the colours of these existing assets to match those that we have used elsewhere in this series. However, we’ll use a slightly different approach and define our own vector drawable to do the job. Our example doesn’t require actionModeSplitBackground, so we’ll just focus on actionModeBackground.

Let’s start with the first of those graphics. It has a dark blue background with a light blue stripe across the bottom. We’ll use a technique that we used before to add lines at the edge of a drawable using an inset drawable to pull the unwanted edges outside of the viewable area. Let’s create a new drawable in res/drawable/cab_background_top:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="0dp"
    android:insetLeft="-5dp"
    android:insetRight="-5dp"
    android:insetTop="-5dp" >

    <shape>
        <solid android:color="@color/stacked_green" />

        <stroke
            android:width="3dp"
            android:color="@color/accent_green" />
    </shape>

</inset>

This works by creating a dark green solid rectangle with a 3dp light green border. We use the negative offsets in the inset to pull the top, left, and right edges of that border outside the visible area of the rectangle. This results in a dark green rectangle with a light green bottom edge, and this is precisely what we require. We can apply this in our theme:

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView</item>
    <item name="android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav</item>
    <item name="android:spinnerDropDownItemStyle">@style/DropDownItem</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:actionBarItemBackground">@drawable/selectable_item_background_stylingactionbar</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top</item>
</style>

If we run this we can see that the ActionMode is styled as we expect. The only thing that isn’t correctly styles is the selection of the “tick” button on the left hand side:

This is pretty simple to fix, we need to create a style which applied our existing selector drawable:

<style name="CloseButton" parent="@android:style/Widget.Holo.ActionButton.CloseMode">
    <item name="android:background">@drawable/selectable_background_stylingactionbar</item>
</style>

Then we set assign this style in the theme:

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView</item>
    <item name="android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav</item>
    <item name="android:spinnerDropDownItemStyle">@style/DropDownItem</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:actionBarItemBackground">@drawable/selectable_item_background_stylingactionbar</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top</item>
    <item name="android:actionModeCloseButtonStyle">@style/CloseButton</item>
</style>

Now we get the correct behaviour on the close button and our styling of the ActionBar is complete:

We’ve made it! It has been a fairly long journey since we first started looking at the ActionBar but, hopefully, this has evolved in to one of the most comprehensive studies of the ActionBar currently available. The ActionBar is a powerful and versatile UI component which, thanks to Jake Wharton’s ActionBarSherlock can be used back to Android 2.X. Applying styles can be problematic, at times, but it is always worth looking at the Android source when you get stuck as often the clues are there in the base theme that you’re using.

The source code for this article can be found here.

© 2012, 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 6 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: ,

3 Responses to “Styling the ActionBar – Part 6”

  1. Von says:

    Thank you for this information on the subject. There were some topic points which have been presented a new way to me, which I didn’t know before.

  2. Marty says:

    Hi, thanks to your great guide, this helps me much to skin my App.

    i have 2 Problems left for skinning:

    is it possible to style the PopupMenu and AlertDialog Header?

    i want to change only the Color !

    Example -> http://developer.android.com/images/ui/dialogs.png
    to look like this -> http://developer.android.com/images/ui/dialog_custom.png

    i’m using Theme.Holo and Android SDK 21.1 RC3/Tools 16.0

    i have try a lot with styles and themes but nothing worked )c:=

    Best regards

Leave a Reply