Android – simple Tab bar example



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>



About Paresh Mayani

I'm Paresh Mayani, a passionate mobile application developer from India. Having been involved in android app development since 2010. By passion, I am 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.