styling the action bar

1. By
Kalluri Vinay Reddy
Android Club
www.facebook.com/vitccandroidclub
Introduction
to
Styling the Action Bar

2. The action bar provides your users a familiar and
predictable way to perform actions and navigate your
app, but that doesn't mean it needs to look exactly
the same as it does in other apps.
Android includes a few built-in activity themes that
include "dark" or "light" action bar styles. You can also
extend these themes to further customize the look for
your action bar.

3. Note: If you are using the Support Library APIs for the action bar, then you
must use (or override) the Theme.AppCompat family of
styles (rather than the Theme.Holo family, available in API level 11 and
higher).
In doing so, each style property that you declare must be declared twice:
once using the platform's style properties (the android: properties) and once
using the style properties included in the Support Library.
(the appcompat.R.attr properties—the context for these properties is
actually your app).

5. Android includes two baseline activity themes that dictate the
color for the action bar:
•Theme.Holo for a "dark" theme.
•Theme.Holo.Light for a "light" theme.
You can apply these themes to your entire app or to individual
activities by declaring them in your
manifest file with the android:theme attribute for the <application>
element or individual <activity>elements.

6. Customize the Background

7. To change the action bar background, create a custom theme
for your activity that overrides the actionBarStyle property.
This property points to another style in which you can
override the background property to specify a drawable
resource for the action bar background.
If your app uses navigation tabs or the split action bar,
then you can also specify the background for these bars
using the backgroundStacked and backgroundSplit properties, respectively.
Caution: It's important that you declare an appropriate parent theme
from which your custom theme and style inherit their styles.
Without a parent style, your action bar will be without many style
properties unless you explicitly declare them yourself.

8. • When supporting Android 3.0 and higher only, you can define the action bar's background like this:
• res/values/themes.xml
For Android 3.0 and higher only
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
</style>
</resources>

9. Then apply your theme to your entire app or individual activities:
<application android:theme="@style/CustomActionBarTheme" ... />

10. For Android 2.1 and higher
When using the Support Library, the same theme as above must instead look like this:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">@drawable/actionbar_background</item>
</style>
</resources>

11. Customize the Text Color
To modify the color of text in the action bar, you need to override separate
properties for each text element:
•Action bar title: Create a custom style that specifies the textColor
•property and specify that style for the titleTextStyle property in your custom
actionBarStyle.
Note: The custom style applied to titleTextStyle should
use TextAppearance.Holo.Widget.ActionBar.Title as the parent style.
•Action bar tabs: Override actionBarTabTextStyle in your activity theme.
•Action buttons: Override actionMenuTextColor in your activity theme.

12. For Android 3.0 and higher only
When supporting Android 3.0 and higher only, your style XML file might look like this:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<!-- ActionBar tabs text styles -->
<style name="MyActionBarTabText"
parent="@style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>

13. • When using the Support Library, your style XML file might
look like this:
res/values/themes.xml
For Android 2.1 and higher

14. <?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">@style/MyActionBarTitleText</item>
</style>

15. • <!-- ActionBar title text -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
<!-- The textColor property is backward compatible with the Support Library
-->
</style>
<!-- ActionBar tabs text -->
<style name="MyActionBarTabText"
parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
<!-- The textColor property is backward compatible with the Support Library
-->
</style>
</resources>

16. Customize the Tab Indicator

17. To change the indicator used for the navigation tabs, create an activity theme
that overrides the actionBarTabStyle property. This property points to another
style resource in which you override the background property that should specify
a state-list drawable.
Note: A state-list drawable is important so that the tab currently selected
indicates its state with a background different than the other tabs.
For more information about how to create a drawable resource that handles
multiple button states, read the State List documentation.

18. res/drawable/actionbar_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected_focused" />

19. •
<!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
</selector>

20. res/drawable/actionbar_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected_focused" />

21. • <!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
</selector>

22. Overlaying the Action Bar
By default, the action bar appears at the top of your activity
window, slightly reducing the amount of space available for the
rest of your activity's layout.
If, during the course of user interaction, you want to hide
and show the action bar, you can do so by calling
hide()and show() on the ActionBar.
However, this causes your activity to recomputed and redraw the
layout based on its new size.

23. • To avoid resizing your layout when the action bar hides
and shows, you can enable overlay mode for the action
bar. When in overlay mode, your activity layout uses all
the space available as if the action bar is not there and
the system draws the action bar in front of your layout.
This obscures some of the layout at the top, but now
when the action bar hides or appears, the system does
not need to resize your layout and the transition is
seamless.

24. • Tip: If you want your layout to be partially visible behind
the action bar, create a custom style for the action bar
with a partially transparent background, such as the one
shown in figure 1. For information about how to define
the action bar background, read Styling the Action Bar.

26. Enable Overlay Mode
For Android 3.0 and higher only
If your minSdkVersion is set to 11 or higher, your custom theme should
use Theme.Holo theme (or one of its descendants) as your parent theme.
For example:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>

27. For Android 2.1 and higher
If your app is using the Support Library for compatibility on devices running
versions lower than Android 3.0, your custom theme should use Theme.AppCompat theme
(or one of its descendants) as your parent theme. For example:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
</resources>

28. Specify Layout Top-margin
When the action bar is in overlay mode, it might obscure some of your
layout that should remain visible. To ensure that such items remain
below the action bar at all times, add either margin or padding to the
top of the view(s) using the height specified by actionBarSize.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
...
</RelativeLayout>

29. If you're using the Support Library for the action bar, you need to remove the android: prefix. For example:
<!-- Support library compatibility -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
...
</RelativeLayout>