Pages

Subscribe:

Labels

Wednesday 28 September 2011

Android Custom Tabs.

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>

             

No comments:

Post a Comment