Making custom tab buttons

Aalok Sharma picture Aalok Sharma · May 2, 2012 · Viewed 7.4k times · Source

How do I get my tab buttons to look like enter image description here

What would be the simplest way to do this if I have a drawable in that shape too???

Answer

Hassy31 picture Hassy31 · May 2, 2012

simply you can implement tabs to your application like this

in onCreate method

TabHost tabHost = getTabHost();
tabHost.setCurrentTabByTag("First");

TabSpec firstTab = tabHost.newTabSpec("First");  
firstTab.setIndicator("firstTab",getResources().getDrawable(R.drawable.ic_action_first)); //drawable 1
firstTab.setContent(R.id.first_content);    //View
tabHost.addTab(firstTab);

TabSpec secondTab = tabHost.newTabSpec("Second");
secondTab.setIndicator("secondTab",getResources().getDrawable(R.drawable.ic_action_second)); //drawable 2
secondTab.setContent(R.id.second_content);    //View
tabHost.addTab(secondTab);

TabSpec thirdTab = tabHost.newTabSpec("Third");
thirdTab.setIndicator("thirdTab",getResources().getDrawable(R.drawable.ic_action_third)); //drawable 3
thirdTab.setContent(R.id.third_content);    //View
tabHost.addTab(thirdTab);

tabHost.setCurrentTab(0);

in xml file

<TabHost android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
        <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="wrap_content" android:layout_height="wrap_content" >

            <LinearLayout android:id="@+id/first_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="first_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout android:id="@+id/second_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="second_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout android:id="@+id/third_content" android:layout_width="fill_parent" android:layout_height="fill_parent">
                <TextView android:text="third_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
            </LinearLayout>
        </FrameLayout>

    </LinearLayout>
    </TabHost>

call your drawable at getResources().getDrawable(R.drawable.drawableid));