Android – simple Tab bar example

By -



Problem: How to display Tab bar in Android?

Android Tab bar example

Android Tab bar example


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>



Paresh Mayani

Paresh Mayani is a lead android developer from India. Currently, He is Sr. Software engineer at InfoStretch Solutions Pvt. Ltd. He has been developing android apps since very 1st version i.e. Android 1.5, he says he has seen days and nights of Android history. He is the Head/Organizer of Google Developers Group (GDG), Ahmedabad

  • Pingback: Android – Change Tab bar background color » TechnoTalkative

  • Pingback: Android – iPhone like Tab bar in Android » TechnoTalkative

  • manish yadav

    how to set the specific tab after on clicklistener

  • Khurram Shehzad

    thnx it works perfect…..
    but the prblem is that whenever the contents on the corresponding tab grow, the TabBar goes behind (becomes INVISIBLE).
    any help in this regard will be higly appreciated…..

    • http://www.technotalkative.com/ Paresh Mayani

      Contents grow?? My dear as per the standard of the Tab bar, you should give long name to the tabs. In second solution you can prepare image with text for placing inside the tab.

  • Dhaval Bhayani

    thnx sir thnk u very much……..

  • rajesh

    can u please help how to createa a footer with overflow items
    like this ………………please