Using TabHost to create a simple Tabbar application - An Android Example

For creating a tabbar application first create a tabhost object to create tabs
In activity_main.xml we create TabHost and specify a layout where we are going to insert the tabs.
Copy and download the code and try it yourself....

Now we are going to create three tabs.
Lets us now first make the xml for it

activity_main.xml :
TabHost provided flexibility of managing data in different views by providing tabbed interface(compared to TabLayout). TabHost basically a container, where you need to put tab widget, which will host tabbed interface and FrameLayout, within which the different views are presented.

• TabHost ( main container of tab view )
• TabWidget ( used to navigate between tabs )
• FrameLayout ( for tab content )

 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

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

        <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" />

    </LinearLayout>

tab1.xml :

 
<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
     
   <TextView android:text="TAB1 DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
</LinearLayout>

tab2.xml :

 
<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
     
   <TextView android:text="TAB2 DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

tab3.xml :

 
<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
     
   <TextView android:text="TAB3 DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content">
 </LinearLayout>

Now create three java class for each of the tabs..

Tab1.java :

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

public class Tab1 extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab1);
 }
}

Tab2.java :

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

public class Tab2 extends Activity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab2);
 }

}

Tab3.java :

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

public class Tab3 extends Activity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab3);
 }

}

Donot forget to introduce the newly created java class to the android manifest file...

AndroidManifest.xml

Mainactivity.java

• TabSpec used to create a new tab.
• By using TabSpec only we can able to setContent to the tab.
• By using TabSpec setIndicator() we can set name to tab.

 
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.app.TabActivity;
import android.content.Intent;


public class MainActivity extends TabActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
  
 /** TabHost will have Tabs */
        TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
        
        TabSpec firstTabSpec = tabHost.newTabSpec("tab_id1");
        TabSpec secondTabSpec = tabHost.newTabSpec("tab_id2");
        TabSpec thirdTabSpec = tabHost.newTabSpec("tab_id3");
        
        firstTabSpec.setIndicator("First").setContent(new Intent(this,Tab1.class));
        secondTabSpec.setIndicator("Second ").setContent(new Intent(this,Tab2.class));
        thirdTabSpec.setIndicator("Third").setContent(new Intent(this,Tab3.class));
               
        tabHost.addTab(firstTabSpec);
        tabHost.addTab(secondTabSpec);
        tabHost.addTab(thirdTabSpec);
 
 } }