Customizing Horizontal Progress bar of a Action-Bar

If you are thinking of overriding the Action-Bar horizontal progress-bar in your application, and you don’t have any idea how to do it then this blog might be useful.Here are the steps for overriding horizontal progress-bar.

First of all, Define theme for your application. In my case it looks like

<resources>
 <style name="AppTheme" parent="Theme.Sherlock" />
     <style name="Theme.ESPN" parent="AppTheme">
     <item name="actionBarStyle">@style/ActionBar</item>
  </style>
<resources>

Secondly, you have to override the style for action-bar as horizontal progress-bar is a property of action-bar.

    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="progressBarStyle">@style/ActionBarHorizontalProgressStyle</item>
        <item name="android:progressBarStyle">@style/ActionBarHorizontalProgressStyle</item></style>

Thirdly, override Widget.Sherlock.ProgressBar.Horizontal style for customizing Horizontal progressbar.

    <style name="ActionBarHorizontalProgressStyle" parent="Widget.Sherlock.ProgressBar.Horizontal">
        <item name="android:progressDrawable">@drawable/progress_horizontal_holo_light</item>
        <item name="android:minHeight">16dip</item>
        <item name="android:maxHeight">16dip</item>
    </style>
Note: progress_horizontal_holo_light.xml can be obtained from android-holo-colors

After all those effort you can see customized white color horizontal progress-bar on top of action-bar.
Actionbar

Make your Action bar beautiful

Android has been supporting Action-bar since android Honeycomb devices and later on it is made compatible to lower end devices also.Open source developer, Jake Wharton made us very much easy by developing action bar library .Here i am explaining how to make a stylish action-bar with rounder corner on rectangular edges something similar to the Facebook android app, which gives a little fancy look to default action-bar.
Actionbar
Here are the steps

1) First of all create a layer-list with a two layer color. First color for the basement color i mean for bottom 1 dip color. and and second layer for the color of action-bar. The corner tag is responsible for the action-bar to be rounded on rectangular edge.




<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="#000000" />

           
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#33085ea7" />

            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="4dp" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#085ea7" />

            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="4dp" />
        </shape>
    </item>
    <item android:bottom="2dp">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#3da0f5" />

                    <corners
                        android:bottomLeftRadius="0dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="4dp"
                        android:topRightRadius="4dp" />
                </shape>
            </item>
            <item android:top="1dp">
                <shape>
                    <gradient
                        android:angle="270"
                        android:endColor="#0176d9"
                        android:startColor="#0083f6" />

                    <corners
                        android:bottomLeftRadius="0dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="4dp"
                        android:topRightRadius="4dp" />
                </shape>
            </item>
        </layer-list>
    </item>

</layer-list>

1) Now make custom theme for your application.


<resources>
 <style name="AppTheme" parent="Theme.Sherlock" />
     <style name="Theme.Nepalkhabar" parent="AppTheme">
        <item name="android:windowBackground">@android:color/white</item>
        <item name="actionBarStyle">@style/ActionBar</item>
        <item name="android:actionBarStyle">@style/ActionBar</item>
      
    </style>

  
    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="background">@drawable/actionbar_bg</item>
        <item name="android:background">@drawable/actionbar_bg</item>
    </style>
</resources>

Then use this theme on your application from manifest file.
And another thing, for toggling action bar menu with a smooth animation here i have used ImageSwithcer in this project and i added a simple custom animation.You can find the whole source code of a project in my git-hub account HERE

NOTE : Don’t forget to add Sherlock action bar while building the project.