ColoredActionBar Themes

Apart from the default Holo themes, HoloAccent provides additional styles that allow further customizing your UI. The main difference is the actionbar background is in the dark accent color, but it makes sure that the actionbar widgets and the navigation items (spinner or tabs) are correctly styled aswell.

The available themes are the following:

• Theme.HoloAccent.ColoredActionBar
• Theme.HoloAccent.ColoredActionBar.Inverse
• Theme.HoloAccent.Light.ColoredActionBar
• Theme.HoloAccent.Light.ColoredActionBar.Inverse

On this page, you will find some tricks to make the most of these themes.

ActionBar Background Style

There are 3 different backgrounds that can be customized:

• ActionBar (default): The main action bar on top of the screen.
• Stacked ActionBar: Placed right under the default actionbar, where the tabs are displayed for tabbed navigation.
• Split ActionBar: placed in the bottom of the screen. It is displayed when you use the splitActionBarWhenNarrow in uiOptions.

HoloAccent provides attributes to set each of those: coloredActionBarBackgroundStyle, coloredActionBarStackedBackgroundStyle and coloredActionBarSplitBackgroundStyle. So in your theme, you can define the style for those attributes:

<?xml version="1.0" encoding="utf-8"?>
<style name="MyTheme" parent="Theme.HoloAccent.ColoredActionBar">
    <item name="coloredActionBarBackgroundStyle">@style/HoloAccent.ActionBarBackground.Solid</item>
    <item name="coloredActionBarStackedBackgroundStyle">@style/HoloAccent.ActionBarBackground.Translucent.Hard</item>
    <item name="coloredActionBarSplitBackgroundStyle">@style/HoloAccent.ActionBarBackground.Translucent.Soft</item>
</style>

In the example, we use the predefined styles but it is also possible to set your own styles. You can define the following attributes:

• accentLineWidth: The default value is 0 (no line).
• accentLineColor: The default value is the dark version of the accent color.
• accentLineOpacity: The default value is 255 (opaque).
• accentBackgroundColor: The default value is the dark version of the accent color.
• accentBackgroundOpacity: The default value is 255 (opaque).

For example, let's define a theme where the action bar has a transparent background and a line of 2dp in the bottom.

<style name="MyTheme" parent="Theme.HoloAccent.ColoredActionBar">
    <item name="coloredActionBarBackgroundStyle">@style/MyActionBarBackgroundStyle</item>
</style>

<style name="MyActionBarBackgroundStyle">
    <item name="accentLineWidth">2dp</item>
    <item name="accentBackgroundOpacity">0</item>
</style>

Launch Style

When you first start an app where the first activity has a ColoredActionBar style, you may notice that the actionbar is not colored for a fraction of a second, and then it gets colored. Most people will not really mind this glitch, but it is possible to make the activity be correctly styled from the start.

We will extend the appropriate actionbar style and we will set the background explicitly, this will make it possible for android to preload it and show it from the start. The actionbar style that needs to be extended depends on the theme we are using:

• Default ColoredActionBar -> HoloAccent.ActionBar.Colored
• ColoredActionBar (Inverse) -> HoloAccent.ActionBar.Colored.Inverse
• Light ColoredActionBar -> HoloAccent.ActionBar.Light.Solid.Colored
• Light ColoredActionBar (Inverse) -> HoloAccent.ActionBar.Light.Solid.Inverse.Colored

So the result would be the following with a red background:

<style name="MyTheme" parent="Theme.HoloAccent.Light.ColoredActionBar.Inverse">
    <item name="accentColor">#FF0000</item>
    <item name="android:actionBarStyle">@style/MyActionBarStyle</item>
</style>

<style name="MyActionBarStyle" parent="HoloAccent.ActionBar.Light.Solid.Inverse.Colored">
    <item name="android:background">#FF0000</item>
</style>

It is important to note that since we define the color explicitly, we can not override it in code (with getOverrideAccentColor()). In case you need to do so, you could just accept this glitch, or you can set this theme only to the launch activity, the first one to be shown. This is actually what the sample app does.