Skip to content

ColoredActionBar Themes

blurkidi edited this page Jun 3, 2014 · 3 revisions

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.

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 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 a 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="Theme.HoloAccent.ColoredActionBar.Inverse">
    <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 set 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).

(to be continued...)

Clone this wiki locally