Android : Custom Tab look and feel

The files which will be needed to customize tab are as follows:

in res/drawable directory:

1.     app_background.xml
2.     tab_selected.xml    (will be used to show effect while selected)
3.     tab_pressed.xml    (will be used to show effect while pressed)
4.     tab_unselected.xml    (will be used to show effect while unselected)
5.     tab_focus.xml    (will be used to show effect while focused)
6.     tab_indicator.xml    (will be used to show effect while to sum up all the states)
7.     tab_check1.xml and tab_check2.xml  (for drawable image)

in res/layout directory:

1.     tab_indicator.xml    (Layout of the tab indicator which will include image)
2.     main.xml    (Layout containing TabWidget and TabHost)
3.     check1.xml and check2.xml   (Layout for tab Activity)

in res/values

1. color.xml (Color definition as resource)
2. strings.xml (Strings as resource)
3. dimentions.xml (Dimentions will be used to set size of components)
4. styles.xml (Define Style etc.)

Snippet of TabActivty looks like as the below iamge

tab_focus

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="@dimen/tab_space" android:right="@dimen/tab_space">
        <shape android:shape="rectangle">
            <gradient android:angle="-90" android:endColor="@color/tabDark"
                android:startColor="@color/tabMedium" />
        </shape>
    </item>
    <!-- draw tab background -->

    <item android:bottom="26sp" android:top="1sp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/tabTransparent" />
        </shape>
    </item>
    <item android:bottom="2sp" android:left="2sp" android:right="2sp"
        android:top="3sp">
        <shape android:shape="rectangle" >
            <corners android:bottomLeftRadius="@dimen/corner_radius"
                android:bottomRightRadius="@dimen/corner_radius"
                android:topLeftRadius="@dimen/corner_radius"
                android:topRightRadius="@dimen/corner_radius" />
            <gradient android:angle="-90"
                android:endColor="#20ffffff"
                android:startColor="#20ffffff" />
        </shape>
    </item>
</layer-list>

tab_press

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/tab_space" android:right="@dimen/tab_space">
        <shape android:shape="rectangle">
            <gradient android:angle="-90" android:startColor="@color/tabMedium"
                android:endColor="@color/tabDark" />
        </shape>
    </item>
    <!-- draw tab background -->
    <item android:top="1sp" android:bottom="26sp">
        <shape android:shape="rectangle">
            <solid android:color="@color/tabTransparent" />
        </shape>
    </item>
    <item android:left="2sp" android:top="3sp"
                android:right="2sp" android:bottom="2sp">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="@dimen/corner_radius"
                android:bottomRightRadius="@dimen/corner_radius"
                android:topLeftRadius="@dimen/corner_radius"
                android:topRightRadius="@dimen/corner_radius" />
            <gradient android:angle="-90" android:startColor="#20ffffff"
                android:endColor="#20ffffff" />
        </shape>
    </item>
</layer-list>

tab_selected
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- draw tab background -->
    <item android:left="@dimen/tab_space" android:right="@dimen/tab_space">
        <shape android:shape="rectangle">
            <gradient android:angle="-90" android:startColor="@color/tabMedium"
                android:endColor="@color/tabDark" />
        </shape>
    </item>
    <item android:top="1sp" android:bottom="26sp" >
        <shape android:shape="rectangle">
            <solid android:color="@color/tabTransparent" />
        </shape>
    </item>
    <item android:left="2sp" android:top="3sp" android:right="2sp"
        android:bottom="2sp">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="@dimen/corner_radius"
                android:bottomRightRadius="@dimen/corner_radius"
                android:topLeftRadius="@dimen/corner_radius" android:topRightRadius="@dimen/corner_radius" />
            <gradient android:angle="-90" android:startColor="#20ffffff"
                android:endColor="#20ffffff" />
        </shape>
    </item>
</layer-list>

tab_unselected
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="@dimen/tab_space" android:right="@dimen/tab_space">
        <shape android:shape="rectangle">
            <gradient android:angle="-90" android:startColor="@color/tabMedium"
                android:endColor="@color/tabDark" />
        </shape>
    </item>
    <item android:top="1sp" android:bottom="26sp" >
        <shape android:shape="rectangle">
            <solid android:color="@color/tabTransparent"/>
    </shape>
    </item>
</layer-list>

drawable/tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 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 -->
    <item android:state_focused="true" android:state_selected="false"
        android:state_pressed="false" android:drawable="@drawable/tab_focus" />
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/tab_focus" />

    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true"
        android:drawable="@drawable/tab_focus" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" />
</selector>

tab_check1 and tab_check2

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/light"
        android:state_selected="true" />
    <item android:drawable="@drawable/light" />
</selector>

check1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" android:layout_width="fill_parent">
    <TextView android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Welcome to Light"
        android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>

Check2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
   <TextView android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Welcome to Hand shake"
        android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>

layout/tab_indicator.xml

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip" android:layout_height="55dip"
    android:layout_weight="1" android:background="@drawable/tab_indicator"
    android:orientation="vertical" android:padding="5dp" >
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/icon" />
    <TextView
        android:id="@+id/title"
        style="?android:attr/tabWidgetStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="tabMedium">#2B2B2B</color>
    <color name="tabDark">#000000</color>
    <color name="tabTransparent">#10ffffff</color>
</resources>

dimensions.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="corner_radius">8dp</dimen>
    <dimen name="tab_space_top">4dp</dimen>
    <dimen name="tab_space">0dp</dimen>
    <dimen name="tab_space_plus1">3dp</dimen>
    <dimen name="tab_space_bottom_line">36sp</dimen>
    <dimen name="tab_space_unselected_top">6sp</dimen>
</resources> 

styles.xml
<?xml version="1.0" encoding="utf-8"?>

<resources>
    <style name="app_theme" parent="android:Theme.NoTitleBar">
        <item name="android:windowBackground">@drawable/app_background</item>
    </style>   
</resources>

Source Code : Here

Output: