Android - simple Tab bar example

By Paresh Mayani - July, 2nd 2011

Problem: How to display Tab bar in Android?

Solution:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/linearLayout1"
        android:layout_height="match_parent"
        android:orientation="vertical">
 
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs">
        </TabWidget>
 
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@android:id/tabcontent">
        </FrameLayout>
    </LinearLayout>
</TabHost>

TabBarActivity.java

package com.technotalkative.tabbarexample;
 
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
 
public class TabBarActivityextends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        TabHost tabHost = getTabHost();
        TabHost.TabSpec spec;
        Intent intent;
 
        intent = new Intent().setClass(this, FirstActivity.class);
        spec = tabHost.newTabSpec("First").setIndicator("First")
                      .setContent(intent);
        tabHost.addTab(spec);
 
        intent = new Intent().setClass(this, SecondActivity.class);
        spec = tabHost.newTabSpec("Second").setIndicator("Second")
                      .setContent(intent);
        tabHost.addTab(spec);
 
        intent = new Intent().setClass(this, ThirdActivity.class);
        spec = tabHost.newTabSpec("Third").setIndicator("Third")
                      .setContent(intent);
        tabHost.addTab(spec);
 
        intent = new Intent().setClass(this, FourthActivity.class);
        spec = tabHost.newTabSpec("Fourth").setIndicator("Fourth")
                      .setContent(intent);
        tabHost.addTab(spec);
    }
}

tab_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <TextView
        android:id="@+id/txtDisplayedTab"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="TextView"
        android:gravity="center|center_vertical">
    </TextView>
 
</RelativeLayout>

FirstActivity.java

package com.technotalkative.tabbarexample;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class FirstActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_test);
 
        TextView txtView = (TextView) findViewById(R.id.txtDisplayedTab);
        txtView.setText("First Tab is Selected");
    }
}

SecondActivity.java

package com.technotalkative.tabbarexample;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class SecondActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_test);
 
        TextView txtView = (TextView) findViewById(R.id.txtDisplayedTab);
        txtView.setText("Second Tab is Selected");
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.technotalkative.tabbarexample"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />
 
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".TabBarActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
 
    <activity android:name="FirstActivity">
        </activity>
 
        <activity android:name="SecondActivity">
        </activity>
 
        <activity android:name="ThirdActivity">
        </activity>
 
        <activity android:name="FourthActivity">
        </activity>
    </application>
</manifest>