Creating custom tabs in Android

Question

I would like to create custom Tabs in Andorid. I have searched a lot but did not find any thing related. I would like to create tabs like this

my code produces this

and my code looks like this

CustomTabActivity.java

public class CustomTabActivity extends TabActivity {

    private TabHost mTabHost;


    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mTabHost = getTabHost();
        mTabHost.setup();
        Intent intentAndroid1 = new Intent().setClass(this,Tab1.class);
        TabSpec tab1 = mTabHost
                .newTabSpec("Android")
                .setIndicator("",getResources().getDrawable(R.drawable.icon))
                .setContent(intentAndroid1);


        Intent intentAndroid2 = new Intent().setClass(this,Tab2.class);
        TabSpec tab2 = mTabHost
                .newTabSpec("Android")
                .setIndicator("",getResources().getDrawable(R.drawable.icon))
                .setContent(intentAndroid2);
        mTabHost.addTab(tab1);
        mTabHost.addTab(tab2);
    }
}

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

Answer 1

If you are just looking to use Tab names instead of icons/images for the tabs, simply change your .setIndicator() method of your TabSpec.

Something like this:

Intent intentAndroid1 = new Intent().setClass(this, Tab1.class);
TabHost.TabSpec tab1 = mTabHost
                .newTabSpec("Android")
                .setIndicator("Rankings")
                .setContent(intentAndroid1);


Intent intentAndroid2 = new Intent().setClass(this, Tab2.class);
TabHost.TabSpec tab2 = mTabHost
                .newTabSpec("Android")
                .setIndicator("My Team")
                .setContent(intentAndroid2);

Which produces something like this (Android 4.3):

For more information on the TabHost.TabSpec, checkout the Android Developer center documentation: http://developer.android.com/reference/android/widget/TabHost.TabSpec.html