TabHost control is use to navigate. When we need to create a multiple views in a single window then we can use TabHost control in android.

 TabHost control is used by two types -

1.       When we have to navigate single activity and multiple views.

2.       Second is when we have to navigate multiple views and actual multiple activities using intent.

Follow the steps which are given below and you can use this example for learning the concepts of TabHost Control.

·         Open Eclipse

·         Select New Android Application Project

·         Enter Application Name as Tabhost_Sample

·         Click Next

·         Click Finish.

After completing my coding and designing the final output will be like this

Now go to the res/Layout/activity_main.xml and paste the following code

<?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" 
    android:addStatesFromChildren="false" > 
<!--Add the TabHost Control--> 
  
    <LinearLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:background="#000" 
        android:orientation="vertical" 
        android:padding="5dp" > 
  
<--TabWidget show the tabbar of TabHost--> 
  
<--TabWidget id should be "@android:id/tabs” --> 
  
        <TabWidget 
            android:id="@android:id/tabs" 
            android:layout_width="match_parent" 
            android:layout_height="60dp" 
            android:background="#000" 
            android:focusable="true" 
            android:focusableInTouchMode="true" /> 
  
        <FrameLayout 
            android:id="@android:id/tabcontent" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            android:background="#000" 
            android:padding="5dp" > 
  
        </FrameLayout> 
    </LinearLayout> 
</TabHost> 
Now create a drawable folder and add three new xml file whose name should be home_config.xml, about_config.xml, contact_config.xml and paste the following code

home_config.xml  

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- When selected, you should use bg with grey --> 
    <item android:drawable="@drawable/home" 
          android:state_selected="true" /> 
    <!-- When not selected, you should use bg with white --> 
    <item android:drawable="@drawable/home" /> 
                <!—home is an image --> 
  
</selector> 

about_config.xml  

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- When selected, you should use bg with grey --> 
    <item android:drawable="@drawable/about" 
          android:state_selected="true" />

    <!-- When not selected, you should use bg with white -->

    <item android:drawable="@drawable/about" />

         <!—about is an image -->

</selector> 

contact_config.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- When selected, you should use bg with grey -->

    <item android:drawable="@drawable/contact"

          android:state_selected="true" />

    <!-- When not selected, you should use bg with white -->

    <item android:drawable="@drawable/contact" />

              <!—contact is an image -->

</selector>

//This class is use for to show the content of Home Page.

package com.example.tabhost_sample;

 

public class Home extends Activity {

 

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

                                TextView tvHome = new TextView(this);

 

//Create the Textview for show the content of the page

 

                                tvHome.setTextColor(Color.WHITE);

                                tvHome.setGravity(Gravity.CENTER);

                                tvHome.setTextSize(25);

                                tvHome.setText("Home Page Content");

                                setContentView(tvHome);

 

                }

}

//This class is use for to show the content of About Us Page

package com.example.tabhost_sample;

import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.Gravity;

import android.widget.TextView;

 

public class AboutUs  extends Activity {

 

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

                                TextView tvContact = new TextView(this);

                                tvContact.setTextColor(Color.WHITE);

                                tvContact.setGravity(Gravity.CENTER);

                                tvContact.setTextSize(25);

                                tvContact.setText("About Us Page Content");

                                setContentView(tvContact);

 

}

}  

//This class is use for to show the content of Contacts Us Page

 

package com.example.tabhost_sample;

import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.Gravity;

import android.widget.TextView;

 

public class Contacts  extends Activity {

 

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

                                TextView tvContact = new TextView(this);

                                tvContact.setTextColor(Color.WHITE);

                                tvContact.setGravity(Gravity.CENTER);

                                tvContact.setTextSize(25);

                                tvContact.setText("Contact Us Page Content");

                                setContentView(tvContact);

 

}

}

  <activity android:name="com.example.tabhost_sample.Home" />

        <activity android:name="com.example.tabhost_sample.Contacts" />

        <activity android:name="com.example.tabhost_sample.AboutUs" /> 

package com.example.tabhost_sample;

 

import android.os.Bundle;

import android.app.TabActivity;

import android.content.Intent;

import android.content.res.Resources;

import android.view.Menu;

import android.view.View;

import android.widget.TabHost;

import android.widget.TabWidget;

import android.widget.Toast;

import android.widget.TabHost.OnTabChangeListener;

import android.widget.TabHost.TabSpec;

 

@SuppressWarnings("deprecation")

public class MainActivity extends TabActivity {

 

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

 

                                setContentView(R.layout.activity_main);

                                try {
 

                                    Resources resource = getResources();
 

                               //Resource is use for to get the xml file of the drawable folder
 

                                final TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost);
 

                // set the Home activity

              //TabSpec is a class which have a setIndicator method  and this is use for to keep the track of tab

 

                       TabSpec tspecHome = tabHost.newTabSpec("Home");

                       tspecHome.setIndicator("Home",
 

                         //Set the icon in Home activity            

 

                                resource.getDrawable(R.drawable.home_config));

                                                tspecHome.setContent(new Intent(this, Home.class));

 

                                                // set the Contacts activity

 

                                                TabSpec tspecContcat = tabHost.newTabSpec("Contacts");

                                                tspecContcat.setIndicator("Contact",

                                                                                resource.getDrawable(R.drawable.contact_config));

                                                tspecContcat.setContent(new Intent(this, Contacts.class));

 

                                                // set the AboutUs activity

 

                                                TabSpec tspecAbout = tabHost.newTabSpec("About");

                                                tspecAbout.setIndicator("About",

                                                                                resource.getDrawable(R.drawable.about_config));

                                                tspecAbout.setContent(new Intent(this, AboutUs.class));

 

                                              //Add the Tabspec in tabhost which show on the top.

 

                                                tabHost.addTab(tspecHome);

                                                tabHost.addTab(tspecContcat);

                                                tabHost.addTab(tspecAbout);

 

                                                // set the Current Tab Position zero

 

                                                tabHost.setCurrentTab(0);

 

                                                TabWidget widget = tabHost.getTabWidget();

                                                View vwGetChildAtZero = widget.getChildAt(0);

 

                                         // set the Background color of child zero position on activity create which is by default selected.

 

                                                vwGetChildAtZero.setBackgroundResource(R.drawable.yellow); 
                                                tabHost.getTabWidget().setStripEnabled(true); 
  
                                                tabHost.setOnTabChangedListener(new OnTabChangeListener() { 
  
                                                                @Override 
                                                                public void onTabChanged(String arg0) { 
  
                                                                                int currentPos = tabHost.getCurrentTab(); 
  
                                                                                TabWidget widget = tabHost.getTabWidget(); 
                                                View vwGetCurrentView = widget.getChildAt(currentPos); 
  
 //For loop will search the selected position. 
  
                                                for (int i = 0; i <widget.getChildCount(); i++) { 
                                                                                                if (i == currentPos) { 
  
  
 //set the selected child position Background Color yellow of TabHost and another child position, set background color black. 
  
                                                                                                                vwGetCurrentView 
                                                                                                              .setBackgroundResource(R.drawable.yellow); 
                                                                                                } else { 
                                                                                                                View vwGetAllChildView = widget.getChildAt(i); 
  
                                                                                                                vwGetAllChildView 
                                                                                                          .setBackgroundResource(R.drawable.black); 
                                                                                                } 
  
                                                                                } 
  
                                                                } 
                                                }); 
  
                                } catch (Exception ex) { 
                                                Toast.makeText(getApplicationContext(), ex.toString(), 
                                                                                Toast.LENGTH_LONG).show(); 
  
                                } 
                } 
  
                @Override 
                public boolean onCreateOptionsMenu(Menu menu) { 
                                // Inflate the menu; this adds items to the action bar if it is present. 
                                getMenuInflater().inflate(R.menu.main, menu); 
                                return true; 
                } 
}