---
title: "TabHost Control in Android"  
description: "In this article we are going to discuss about TabHost control."  
author: "Manoj Pandey"  
published: 2014-03-26  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1388/tabhost-control-in-android  
category: "android"  
tags: ["android"]  
reading_time: 16 minutes  

---

# TabHost Control in Android

In this article we are going to discuss about TabHost control.

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

![TabHost Control in Android](https://www.mindstick.com/mindstickarticle/252fe66e-8288-4fed-b14d-06862cea8faf/images/741785c7-8215-4f77-bf5f-29233423627f.png)

##### 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>
```

\

Add image in res/ drawable folder. Images name should be about.png, home.png,about.png which is used in previous xml files.

![TabHost Control in Android](https://www.mindstick.com/mindstickarticle/252fe66e-8288-4fed-b14d-06862cea8faf/images/3ce391c5-6e8b-42c3-a151-5acf76ee84a0.png)

And now create three activity, name should be Home.java, AboutUs.java, and Contacts.java.

Now Paste the following code in three new activities.

##### Home.java

```
//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);
 
                }
}
```

AboutUs.java

```
//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);
 
}
}

  
```

##### Contacts.java

```
//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);
 
}
}
```

Define the activities in AndroidManifest.xml.

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

##### Write the following code in MainActivity.java

```
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;
                }
}
```

Now Run the Android application

##### Select the Contacts

![TabHost Control in Android](https://www.mindstick.com/mindstickarticle/252fe66e-8288-4fed-b14d-06862cea8faf/images/7eb1ea9a-5a6d-488e-aaff-9ab72e9dfe76.png)

##### Select the about icon

![TabHost Control in Android](https://www.mindstick.com/mindstickarticle/252fe66e-8288-4fed-b14d-06862cea8faf/images/8c755473-3ec6-482f-a507-b5dc83541fac.png)

Thanks for reading this article. You can enter your valuable comments

And suggestion to improve this article in the comment box.

---

Original Source: https://www.mindstick.com/articles/1388/tabhost-control-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.