The files which will be needed to customize tab are as follows:
in res/drawable directory:
- app_background.xml
- tab_selected.xml (will be used to show effect while selected)
- tab_pressed.xml (will be used to show effect while pressed)
- tab_unselected.xml (will be used to show effect while unselected)
- tab_focus.xml (will be used to show effect while focused)
- tab_indicator.xml (will be used to show effect while to sum up all the states)
- tab_check1.xml and tab_check2.xml (for drawable image)
in res/layout directory:
- tab_indicator.xml (Layout of the tab indicator which will include image)
- main.xml (Layout containing TabWidget and TabHost)
- check1.xml and check2.xml (Layout for tab Activity)
in res/values
- color.xml (Color definition as resource)
- strings.xml (Strings as resource)
- dimentions.xml (Dimentions will be used to set size of components)
- 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: