How to Create a new theme for ActionBar in Android.

In this post I will be telling you about how to change the default theme of ActionBar with our own custom One.
Here I will be changing the background color, textColor and alpha of default ActionBar.
Let’s see how it is done.

By Checking out the styles.xml you will find that by default it looks like this.

ActionBar Theme

<resources>
 <style name="AppTheme" parent="android:Theme.Light" />
</resources>

Right now, we are using a theme “AppTheme” which is inheriting all the attributes from Theme.Light.
Lets define a new style named “myActionBarTheme”.

Now my styles.xml looks like this.
Note that this time i Just changed “Holo.Light” to just “Holo” for darker theme.
However you can leave it as the old one.

styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="CustomActionBarTheme" parent="android:style/Theme.Holo">
        <item name="android:actionBarStyle">@style/myActionBarTheme</item>
        
    </style>

    <style name="myActionBarTheme" parent="android:style/Widget.Holo.ActionBar">
        <item name="android:background">#FF4444</item>
        <item name="android:titleTextStyle">@style/myActionBarTitleTextStyle</item>
        <item name="android:alpha">1.0</item>
    </style>
     <style name="myActionBarTitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#FFFFFF</item>
    </style>

</resources>

Now we have to use it right. If we want to apply it to the complete application we can do it like this in the Android Manifest file.

AndroidManifest.xml

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

Or You can apply different ones to different activities also.
In this example I am just changing the ActionBar text color and alpha also.
You can do any customization according to your wish.

What ever we use as background will be strectched to fill the size of the ActionBar , so make sure you will be providing a nine-patch image or an XML.
Here I am using an Xml named “top_bar_bg.xml”

top_bar_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <shape>
         <gradient android:angle="90" 
              android:centerColor="#FF0066FF" 
              android:endColor="#FF0066FF" 
              android:startColor="#FF0066FF" />
        </shape>
    </item>
</selector>

More and more ActionBar customizations and tips will be coming in the next updates.
Please visit again or subscribe to coderzheaven.com and also like us on facebook to get quick updates.

PLease leave your valuable comments on this post.

You can download the complete source code from here.

Leave a Reply Cancel reply