Customizing the Action Bar Using Android Studio 1.0

Introduction

As in my previous article, this article describes various aspects and basics of an Action Bar. While learning the Action Bars basics we saw implementations of public boolean onOptionsItemSelected(MenuItem item) of MainActivity.java for setting up an Action Bar.

However when it comes to styling or customizing the Action Bar theme we should know various theme resources. Basically the Action Bar provides users a native and predictable way to perform actions and navigate the application. It is not obligatory for the developer to develop the Action Bars as other applications already have. If the developer wants to add a style to the Action Bar then that would be a better of the fit product's  brand, it could be easily achievable using Android's style and theme resources.

Use an Android Theme

Android has themes that specifies the color. Android lacks basic themes however there are two themes basically as in the following:

• Theme.Holo for "dark" theme
  
  This is the default theme with a higher preference than the Holo theme. This theme was first added in API level 11. However this theme is good because anyone can count the text as text that must be light on the dark background. Although we must not make any assumptions of it.
  
  If we are developing for the API level 11 or the higher versions of Android then we must implement the theme Holo or Theme_DeviceDefault. If we are developing for the Honeycomb version of Android then the widgets in the holographic theme are translucent on their background, so applications must ensure that any background they use with this theme is itself dark; otherwise, it will be difficult to see the widgets. Basically this User Interface style also includes a full Action Bar by default ("public static final int Theme_Holo "). 

• Theme.Holo.Light for a "light" theme
  
  This theme has a light background with dark text. This theme is just for the Android version API level 11. However in the honeycomb version the holographic theme (light version). The widgets in the holographic theme are translucent on their background, so applications must ensure that any background they use with this theme is itself light. Otherwise, it will be difficult to see the widgets. This User Interface style also includes a full Action Bar by default (985).

We can apply these themes to our entire application or to an individual activity by declaring them in the manifest file with the android.theme attribute for the <application> element or individual <activity> elements.

For example:

<application android: theme ="@android:style/Theme.Holo.light.../>

When Using Support Library

When the support library is used it is necessary to use the Themes as written below.

• Theme.AppCompat for the dark theme.

• Theme.AppCompat.Light for the "light" theme.

• Theme.AppCompat.Light.DarkActionBar

However use these libraries according to the contrast and icons matching the background of the respective themes.

Styles and Themes

A style is a collection of properties that specify the look and format for a view or window. A style can specify properties such as height, padding, font, color, font size, background, color and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.

Likewise CSS in web design and styles in Android plays same role. However both are used for design purposes but the syntax is different.

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

It can be rewritten as: 

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

CodeFont is the attribute related to the style and have been removed from the layout.xml file and put into the style definition.

Defining the Styles

For each style creation add a <style> element to the file with a unique name.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

Style Properties

In this section we now understand what the properties are of the style element but some of these are under the <item> element  like layout_width and textcolor.

<Edit Text
        android: inputType="number"
....../>

We can instead create a style for the EditText element that includes this property:

<style name="Numbers">
    <item name="android:inputType">number</item>
        ...
</style>

Customizing the Background

To change the Action Bar background, we must create a custom theme for our activity that will overrides the actionBarStyle property quite similarly. 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 an application uses navigation tabs or the split Action Bar, then we must specify the background for these bars types using the backgroundStacked and backgroundSplit properties, respectively.

Note: It is the highest and first priority to set the appropriate parent theme from which the custom theme and default theme inherit their style.

For Android 3.0 and higher only

When supporting Android API level 11 or higher we can define an Action Bar background like this:

<?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>

Then apply the theme to the entire application or individual activities as in the following:

<application android:theme="@style/CustomActionBarTheme" ... />

For Android 2.1 and higher

For the version of Android using the support library the changes that must exist in the code above provides compatiblity with the version support. Consider the code given below:

<?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>

Then apply this theme to the entire app or individual activities:

<application android:theme="@style/CustomActionBarTheme" ... />

Note: If we look at the code for both 3.0 and higher and for 2.1 that uses the support library it is just the lines of code that support library attributes as shown below:

<item name="actionBarStyle">@style/MyActionBar</item>

We must add this line of code for version 2.1 or higher just for compatibility with the support library.

<item name="background">@drawable/actionbar_background</item>

This line is for the background setter in the 2.1 or higher version just for compatibility  as mentioned above.

Summary

This article is based on the themes and styles in Android for application to the Action Bar and individual activities. Basically the themes and styles are for the version higher than "Honeycomb" or API level 11 but it can be done in the 2.1 version using "Support libraries". See the code snippet with the minor changes in both of the versions.