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>

             

2 comments:

Pavel Co Ebele said...

Very much useful article. Kindly keep blogging

Java Training in Chennai

Java Online Training India

Petter Marry said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Java developer learn from Java Training in Chennai. or learn thru Java Online Training in India . Nowadays Java has tons of job opportunities on various vertical industry.

Post a Comment