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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s