TabActivity in Android

In this blog post, I would like to explain how to create Tab in Android using TabActivity.

First, create a layout “main.xml” . Now, include the following XML code in “main.xml” :

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <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="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

Next, create an Activity ”MainActivity.java”. Now, include the following Java code in “MainActivity.java”:

<b>MainActivity.java</b>
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Resources ressources = getResources();
		TabHost tabHost = getTabHost(); 

		// Android tab
		Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
		TabSpec tabSpecAndroid = tabHost
			.newTabSpec("Android")
			.setIndicator("", ressources.getDrawable(R.drawable.icon_android_config))
			.setContent(intentAndroid);

		// Apple tab
		Intent intentApple = new Intent().setClass(this, AppleActivity.class);
		TabSpec tabSpecApple = tabHost
			.newTabSpec("Apple")
			.setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config))
			.setContent(intentApple);

		// Windows tab
		Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
		TabSpec tabSpecWindows = tabHost
			.newTabSpec("Windows")
			.setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config))
			.setContent(intentWindows);

		// Blackberry tab
		Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
		TabSpec tabSpecBerry = tabHost
			.newTabSpec("Berry")
			.setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config))
			.setContent(intentBerry);

		// add all tabs
		tabHost.addTab(tabSpecAndroid);
		tabHost.addTab(tabSpecApple);
		tabHost.addTab(tabSpecWindows);
		tabHost.addTab(tabSpecBerry);

		//set Windows tab as default (zero based)
		tabHost.setCurrentTab(2);
	}

}

Next, we have to create separate screen for each tab.

Include the following four activities:

AndroidActivity.java

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AndroidActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);
    }
}

BlackBerryActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class BlackBerryActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);
    }
}

WindowsActivity.java:

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class WindowsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Windows mobile tab");
        setContentView(textview);
    }
}

AppleActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class AppleActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);
    }
}

Next, include following four XML files inside the “drawable” folder.

icon_android_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_android"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_android" />
</selector>

icon_apple_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_apple"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_apple" />
</selector>

icon_blackberry_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_blackberry"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_blackberry" />
</selector>

icon_windows_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_windows"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_windows" />
</selector>

Screenshot

Hope this blog post was helpful. Do let me know your feedback.