Tab Layout | TabBar - Android Example

In 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 :

/**************** 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"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    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
      xmlns:android="http://schemas.android.com/apk/res/android"
      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
      xmlns:android="http://schemas.android.com/apk/res/android"
      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
      xmlns:android="http://schemas.android.com/apk/res/android"
      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"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    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>