Styling the ActionBar – Part 1

Recently on Styling Android we’ve been looking at the ActionBar, but this would not be complete without having a look at how we can customise the look and feel of our ActionBar. Up to know the stuff that we’ve looked at on ActionBar has been relatively straightforward, however getting the styling right can be a little tricky. The main reason for this is simply that there is a sparsity of documentation on this issue and it often requires studying the Android source to determine how to style a particular part of the ActionBar.

Before we begin, it is worth mentioning a couple of great resources. The first is Google Developer Advocate Nick Butcher’s excellent article on Customising the ActionBar. Nick’s post offers some great insights in to how to style the ActionBar, and while it was a great point of reference while writing this series, there are some areas that are not covered.

The second resource worth mentioning is Jeff Gilfelt’s ActionBar Style Generator. This is an on-line tool, based upon Roman Nurick’s Android Asset Studio, which will generate the styles and assets based upon a few values and colours that you enter.

I have used Jeff’s tool to generate the assets’ that we’ll use in this series, but I’ll be generating the styles manually so that we can explain them as we add them during this tutorial.

To gain some understanding of how to style the ActionBar, let’s use the code that we finished with at the end of the Basic ActionBar and ActionMode series’ and try and style that in to a StylingAndroid colour scheme. It is worth pointing out that normally, I would stick with the standard grey panels of the Holo Light style, and change the accents to the brand colour. For the purposes of covering how to change everything, I’ll go for a rather more garish colour scheme, but one that allows us to see how the various style attributes affect the overall appearance of the ActionBar. Here’s how I configured Jeff’s tool to generate the assets that we’ll use:

The colour values that I have used are:

  • Action bar color: #14a804
  • Stacked color: #118504
  • Popup color: #14a804
  • Accent color: #97e08f

I have elected to use white text because it shows up better against the basic Styling Android green of #14A804. In order to achieve this, we actually need to use a dark theme (which results in light text). It is possible to use a dark theme for the ActionBar while using a light theme for the rest of the app. Let’s look the theme that we created in Basic ActionBar – Part 3 in res/values/styles.xml:

If we run this we can see that we now have a dark Holo ActionBar while the rest of the app has a Holo.Light style:

Holo.Light.DarkActionBar

In the next part of this series we’ll look at applying some basic colours to our ActionBar, and then start setting some of the custom assets that we generated to begin styling individual controls.

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

Creative Commons License
Styling the ActionBar – Part 1 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: ,

One Response to “Styling the ActionBar – Part 1”

Leave a Reply