android, Tutorial 029-7, UI, Tab customizations


main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout android:orientation="vertical"
		android:layout_width="fill_parent" android:layout_height="fill_parent">
		<TabWidget android:id="@android:id/tabs"
			android:layout_width="fill_parent" android:layout_height="wrap_content" />
		<FrameLayout android:id="@android:id/tabcontent"
			android:layout_width="fill_parent" android:layout_height="fill_parent">
		</FrameLayout>
	</LinearLayout>
</TabHost>

layout\tabs_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabsLayout" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:background="@drawable/tab_bg_selector"
	android:padding="10dip" android:gravity="center" android:orientation="vertical">

	<TextView android:id="@+id/tabsText" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:text="Title"
		android:textSize="15dip" android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

drawable\tab_bg_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<gradient android:startColor="#A8A8A8" android:centerColor="#7F7F7F"
		android:endColor="#696969" android:angle="-90" />
</shape>

drawable\tab_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
	<item android:state_selected="true" android:state_focused="false"
		android:state_pressed="false" android:drawable="@drawable/tab_bg_selected" />
	<!--  Inactive tab -->
	<item android:state_selected="false" android:state_focused="false"
		android:state_pressed="false" android:drawable="@drawable/tab_bg_unselected" />
	<!--  Pressed tab -->
	<item android:state_pressed="true" android:drawable="@android:color/transparent" />
	<!--  Selected tab (using d-pad) -->
	<item android:state_focused="true" android:state_selected="true"
		android:state_pressed="false" android:drawable="@android:color/transparent" />
</selector>

drawable\tab_bg_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<gradient android:startColor="#5C5C5C" android:centerColor="#424242"
		android:endColor="#222222" android:angle="-90" />
</shape>

drawable\tab_text_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white" />
    <item android:state_focused="true" android:color="@android:color/white" />
    <item android:state_pressed="true" android:color="@android:color/white" />
    <item android:color="#f8f8f8" />
</selector>

sample code:

Tutorial_UI_Tab_Res_Tab_Style

reference:
http://code.google.com/p/android-custom-tabs/downloads/detail?name=customized-tabs.zip&can=2&q=


Leave a Reply