Home > DeveloperSection > Articles > TabHost Control in Android

TabHost Control in Android


Android Android 
Ratings:
2 Comment(s)
 6086  View(s)
Rate this:

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

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

 

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

Select the about icon

TabHost Control in Android

 

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

 And suggestion to improve this article in the comment box.

 


nice article.

By Rohit Kesharwani on   2 years ago
nice article.

<activity android:name="com.example.tabhost_sample.MainActivity" android:theme="@android:style/Theme.NoTitleBar" android:label="@string/app_name" >

By Manoj Pandey on   2 years ago
Use the theme for show image icon



<activity
            android:name="com.example.tabhost_sample.MainActivity"
              android:theme="@android:style/Theme.NoTitleBar" 
            android:label="@string/app_name" >

Don't want to miss updates? Please click the below button!

Follow MindStick