In this post I customized the android TabWidget color,background,border and many of the TabWidget properties .To do is myself I used the this tutorial.Based on that tutorial I done the modifications in my project.
The xml layout file for the Tabs as like this
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<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"
android:background="#000000"
android:padding="1dip"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="@+id/email_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:scrollbars="vertical"
android:cacheColorHint="#bebebe"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
<ListView
android:id="@+id/domain_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:cacheColorHint="#bebebe"
android:scrollbars="vertical"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
<ListView
android:id="@+id/phrase_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:cacheColorHint="#bebebe"
android:scrollbars="vertical"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
</FrameLayout>
</LinearLayout>
</TabHost>
Define the my_border.xml drawable file under the drawable folder. This is used to define the custom drawables (here is for custom border for listview.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FFFF00" />
<padding android:left="2dp" android:top="0dp"
android:right="2dp" android:bottom="0dp" />
<solid android:color="#bebebe" />
<corners android:radius="4dp" />
</shape>
In the main Activity write java code like this.
private TabHost tabhost;
display = getWindowManager().getDefaultDisplay();
width = display.getWidth()/5+2;
height = display.getHeight();
tabhost=(TabHost)findViewById(android.R.id.tabhost);
tabhost.setup();
//This is the devider drawable between to widgets.
tabhost.getTabWidget().setDividerDrawable(R.drawable.devider);
TabHost.TabSpec spec;
View view1 = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv1 = (TextView) view1.findViewById(R.id.tabsText);
tv1.setText("Email");
spec = tabhost.newTabSpec("email").setIndicator(tv1);
spec.setContent(R.id.email_listview);
tabhost.addTab(spec);
View view = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText("Domain");
spec = tabhost.newTabSpec("domain").setIndicator(tv);
spec.setContent(R.id.domain_listview);
tabhost.addTab(spec);
View view2 = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv2 = (TextView) view2.findViewById(R.id.tabsText);
tv2.setText("Phrase");
spec = tabhost.newTabSpec("phrase").setIndicator(tv2);
spec.setContent(R.id.phrase_listview);
tabhost.addTab(spec);
tabhost.setCurrentTab(0);
tabhost.getTabWidget().getChildAt(0).getLayoutParams().height = 60;
tabhost.getTabWidget().getChildAt(1).getLayoutParams().height = 60;
tabhost.getTabWidget().getChildAt(2).getLayoutParams().height = 60;
The devider.xml file is as follows res/drawable.devider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#000000" android:centerColor="#000000"
android:endColor="#000000" android:angle="-90" />
<size android:width="1dip" />
</shape>
tabs_bg.xml layout file defines the layout for the tabwidget. res/layout/tabs_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:background="@drawable/tab_bg_selector"
android:textSize="15dip"
android:textColor="@drawable/tab_text_selector"
android:layout_margin="100dip"/>
The background and the textcolor selector files are defined like this under the res/drawable folder.
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="@drawable/tab_bg_press" />
<!-- Selected tab (using d-pad) -->
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false" android:drawable="@color/transparent" />
</selector>
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/black" />
<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>
tab_bg_seleced.xml under res/drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ffffff" android:centerColor="#f2f2f2"
android:endColor="#d8d8d8" android:angle="-90" />
<stroke android:width="0dip" android:color="#000000" />
</shape>
tab_bg_unseleted.xml under res/drawable folder
<?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" />
<stroke android:width="0dip" android:color="#000000" />
</shape>
tab_bg_press.xml under the res/drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:color="#D9D900">
<gradient android:startColor="#D9D900" android:centerColor="#D9D900"
android:endColor="#D9D900" android:angle="-90" />
<stroke android:width="1dp" android:color="#000000" />
</shape>
colors.xml under the res/values folder is like this ..
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent">#045645</color>
</resources>
The xml layout file for the Tabs as like this
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<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"
android:background="#000000"
android:padding="1dip"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="@+id/email_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:scrollbars="vertical"
android:cacheColorHint="#bebebe"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
<ListView
android:id="@+id/domain_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:cacheColorHint="#bebebe"
android:scrollbars="vertical"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
<ListView
android:id="@+id/phrase_listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:background="@drawable/my_border"
android:cacheColorHint="#bebebe"
android:scrollbars="vertical"
android:scrollbarSize="35dip"
android:scrollingCache="true"/>
</FrameLayout>
</LinearLayout>
</TabHost>
Define the my_border.xml drawable file under the drawable folder. This is used to define the custom drawables (here is for custom border for listview.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FFFF00" />
<padding android:left="2dp" android:top="0dp"
android:right="2dp" android:bottom="0dp" />
<solid android:color="#bebebe" />
<corners android:radius="4dp" />
</shape>
In the main Activity write java code like this.
private TabHost tabhost;
display = getWindowManager().getDefaultDisplay();
width = display.getWidth()/5+2;
height = display.getHeight();
tabhost=(TabHost)findViewById(android.R.id.tabhost);
tabhost.setup();
//This is the devider drawable between to widgets.
tabhost.getTabWidget().setDividerDrawable(R.drawable.devider);
TabHost.TabSpec spec;
View view1 = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv1 = (TextView) view1.findViewById(R.id.tabsText);
tv1.setText("Email");
spec = tabhost.newTabSpec("email").setIndicator(tv1);
spec.setContent(R.id.email_listview);
tabhost.addTab(spec);
View view = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText("Domain");
spec = tabhost.newTabSpec("domain").setIndicator(tv);
spec.setContent(R.id.domain_listview);
tabhost.addTab(spec);
View view2 = getLayoutInflater().inflate(R.layout.tabs_bg,null);
TextView tv2 = (TextView) view2.findViewById(R.id.tabsText);
tv2.setText("Phrase");
spec = tabhost.newTabSpec("phrase").setIndicator(tv2);
spec.setContent(R.id.phrase_listview);
tabhost.addTab(spec);
tabhost.setCurrentTab(0);
tabhost.getTabWidget().getChildAt(0).getLayoutParams().height = 60;
tabhost.getTabWidget().getChildAt(1).getLayoutParams().height = 60;
tabhost.getTabWidget().getChildAt(2).getLayoutParams().height = 60;
The devider.xml file is as follows res/drawable.devider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#000000" android:centerColor="#000000"
android:endColor="#000000" android:angle="-90" />
<size android:width="1dip" />
</shape>
tabs_bg.xml layout file defines the layout for the tabwidget. res/layout/tabs_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:background="@drawable/tab_bg_selector"
android:textSize="15dip"
android:textColor="@drawable/tab_text_selector"
android:layout_margin="100dip"/>
The background and the textcolor selector files are defined like this under the res/drawable folder.
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="@drawable/tab_bg_press" />
<!-- Selected tab (using d-pad) -->
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false" android:drawable="@color/transparent" />
</selector>
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/black" />
<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>
tab_bg_seleced.xml under res/drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#ffffff" android:centerColor="#f2f2f2"
android:endColor="#d8d8d8" android:angle="-90" />
<stroke android:width="0dip" android:color="#000000" />
</shape>
tab_bg_unseleted.xml under res/drawable folder
<?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" />
<stroke android:width="0dip" android:color="#000000" />
</shape>
tab_bg_press.xml under the res/drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:color="#D9D900">
<gradient android:startColor="#D9D900" android:centerColor="#D9D900"
android:endColor="#D9D900" android:angle="-90" />
<stroke android:width="1dp" android:color="#000000" />
</shape>
colors.xml under the res/values folder is like this ..
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent">#045645</color>
</resources>
No comments:
Post a Comment