http://androidexample.com/Tab_Layout_%7C_TabBar_-_Android_Example/index.php?view=article_discription&aid=103&aaid=125


n this example creating a tab layout to show different screen for each tab. 
Creating three tabs and setting different images and screens for each tab.

 

Project Structure :

 

TabLayout tabbar

 

/**************** Create Main Screen **********/

 

File:  src/TabBar.java

- To Create Tab and Tab change listner Extend TabActivity and implements OnTabChangeListener.
- Create tabhost object to create tabs.
- Create three tabs name FOOD , GAME , SPORT and set background images.
- Create three activities add these tabs.
- Add Tabs to tabhost.

 

import android.os.Bundle;
import android.content.Intent;
import android.util.Log;
import android.widget.TabHost;
import android.app.TabActivity;
import android.widget.TabHost.OnTabChangeListener;
 
public class TabBar extends TabActivity implements OnTabChangeListener{
 
    /** Called when the activity is first created. */
      TabHost tabHost;
       
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.tab_bar_main);
           
          // Get TabHost Refference
          tabHost = getTabHost();
           
          // Set TabChangeListener called when tab changed
          tabHost.setOnTabChangedListener(this);
       
          TabHost.TabSpec spec;
          Intent intent;
     
           /************* TAB1 ************/
          // Create  Intents to launch an Activity for the tab (to be reused)
          intent = new Intent().setClass(this, Tab1.class);
          spec = tabHost.newTabSpec("First").setIndicator("")
                        .setContent(intent);
           
          //Add intent to tab
          tabHost.addTab(spec);
     
          /************* TAB2 ************/
          intent = new Intent().setClass(this, Tab2.class);
          spec = tabHost.newTabSpec("Second").setIndicator("")
                        .setContent(intent); 
          tabHost.addTab(spec);
     
          /************* TAB3 ************/
          intent = new Intent().setClass(this, Tab3.class);
          spec = tabHost.newTabSpec("Third").setIndicator("")
                        .setContent(intent);
          tabHost.addTab(spec);
     
          // Set drawable images to tab
          tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.tab2);
          tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.tab3);
             
          // Set Tab1 as Default tab and change image  
          tabHost.getTabWidget().setCurrentTab(0);
          tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab1_over);
           
     
       }
 
    @Override
    public void onTabChanged(String tabId) {
         
        /************ Called when tab changed *************/
         
        //********* Check current selected tab and change according images *******/
         
        for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
        {
            if(i==0)
                tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab1);
            else if(i==1)
                tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab2);
            else if(i==2)
                tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab3);
        }
         
         
        Log.i("tabs", "CurrentTab: "+tabHost.getCurrentTab());
         
    if(tabHost.getCurrentTab()==0)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab1_over);
    else if(tabHost.getCurrentTab()==1)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab2_over);
    else if(tabHost.getCurrentTab()==2)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab3_over);
         
    }
 
}

 

File : res/layout/main.xml

 

<?xml version="1.0" encoding="utf-8"?>
    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">
         
        <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>
     
</TabHost>

 

/**************** Create Tab1 Screen **********/

 

File:  src/Tab1.java

 

import android.os.Bundle;
import android.app.Activity;
 
 
public class Tab1 extends Activity {
 
    /** Called when the activity is first created. */
       
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.tab1);
        }
}

File : res/layout/tab1.xml

 

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
     
   <!--  Screen Design for Food tab -->
   <TextView android:text="FOOD TAB DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

 

/**************** Create Tab2 Screen **********/

 

File:  src/Tab2.java

 

import android.os.Bundle;
import android.app.Activity;
 
public class Tab1 extends Activity {
 
    /** Called when the activity is first created. */
       
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.tab2);
        }
}

File : res/layout/tab2.xml

 

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
     
   <!--  Screen Design for Game tab -->
   <TextView android:text="GAME TAB DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

 

/**************** Create Tab3 Screen **********/

 

File:  src/Tab3.java

 

import android.os.Bundle;
import android.app.Activity;
 
public class Tab1 extends Activity {
 
    /** Called when the activity is first created. */
       
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.tab3);
        }
}

 

File : res/layout/tab3.xml

 

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
     
   <!--  Screen Design for Sport tab -->
   <TextView android:text="SPORT TAB DATA"
             android:padding="15dip"
             android:textSize="18dip"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

 

File : AndroidManifest.xml

 

<?xml version="1.0" encoding="utf-8"?>
    package="com.androidexample.tabbar"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.androidexample.tabbar.TabBar"
            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=".Tab1"  <</activity>
        <activity android:name=".Tab2"  <</activity>
        <activity android:name=".Tab3"  <</activity>
         
    </application>
 
</manifest>