Android TabActivity | Tab Layout Demo | Tab Host Activity Example in Android

Hi Friends,

          As we know Tab-Activity is now depreciated  in Android, but some time we use it for create simple Tab pages in our application. So today I am going to share tutorial for Tab Host Activity in android. It is a simple tab activity demo, group child activity and pager tab example I will share soon. Hope my blog help you. Please follow step by step my blog for create simple Tab Layout-

Print Screen: 

1)Create a new project, name TabHostDemo.

2)Create an  TabHostActivity and extend it to TabActivity.

3)Create 3 other activity name-Homeactivity, AboutActivity, ContactActivity.

4)Create layout activity_tab_host.xml .

5)Create another 3 layout for Home, About, Contact Activity, name activity_home, activity_about, activity_contact.

6)Do optional activity for change tab images on selection.Create ic_tab_home, ic_tab_about, ic_tab_contact.

Note-this step is not must, you can direct put your images in your TabHostActivity-

// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, HomeActivity.class);
spec = tabHost.newTabSpec("home")
.setIndicator("HOME", res.getDrawable(R.drawable.home))//set here
.setContent(intent);
tabHost.addTab(spec);
7)Add images - home.png, about.png, contact.png in drawable download below images-

8)Add activity in manifest.xml
9)Run your project and enjoy :)

My Code:

1)TabHostActivity.java-

package com.manish.tabdemo;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class TabHostActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_host);

Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Reusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, HomeActivity.class);
spec = tabHost.newTabSpec("home")
.setIndicator("HOME", res.getDrawable(R.drawable.ic_tab_home))
.setContent(intent);
tabHost.addTab(spec);

// Do the same for the other tabs

intent = new Intent().setClass(this, AboutActivity.class);
spec = tabHost.newTabSpec("about")
.setIndicator("ABOUT", res.getDrawable(R.drawable.ic_tab_about))
.setContent(intent);
tabHost.addTab(spec);


intent = new Intent().setClass(this, ContactActivity.class);
spec = tabHost
.newTabSpec("contact")
.setIndicator("CONTACT",
res.getDrawable(R.drawable.ic_tab_contact))
.setContent(intent);
tabHost.addTab(spec);

//set tab which one you want open first time 0 or 1 or 2
tabHost.setCurrentTab(0);


}

}

2)HomeActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
}
}

3)AboutActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class AboutActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_about);
}
}

4)ContactActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class ContactActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_contact);
}
}

5)activity_tab_host.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">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>
     
    </LinearLayout>

</TabHost>

6)activity_home.xml-

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

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

    android:layout_width="fill_parent"

    android:background="#0099CC"

    android:layout_height="fill_parent" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Home Tab"

        android:textSize="35sp"

        android:textColor="#ffffff" />

</RelativeLayout>

7)activity_about.xml

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

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

    android:layout_width="fill_parent"

    android:background="#808080"

    android:layout_height="fill_parent" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="About Tab"

        android:textSize="35sp"

        android:textColor="#ffffff" />

</RelativeLayout>

8)activity_contact.xml-

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

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

    android:layout_width="fill_parent"

    android:background="#ffdddd"

    android:layout_height="fill_parent" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Contact Tab"

        android:textSize="35sp"

        android:textColor="#000000" />

</RelativeLayout>

now put selector for tabs images in drawable folder- 

9)ic_tab_home.xml-

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

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

    <!-- When selected -->

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

          android:state_selected="true" />

    <!-- When not selected-->

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

</selector>

10)ic_tab_about.xml-

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

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

    <!-- When selected -->

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

          android:state_selected="true" />

    <!-- When not selected-->

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

</selector>

11)ic_tab_contact.xml-

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

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

    <!-- When selected -->

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

          android:state_selected="true" />

    <!-- When not selected-->

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

</selector>

12)AndroidManifest.xml-

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

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

    package="com.manish.tabdemo"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="16" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.manish.tabdemo.TabHostActivity"

            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="com.manish.tabdemo.HomeActivity"/>

             <activity android:name="com.manish.tabdemo.AboutActivity"/>

                  <activity android:name="com.manish.tabdemo.ContactActivity"/>

    </application>

</manifest>

13) DOWNLOAD ZIP CODE

Please feel free to post your testimonials regarding my work here. Please leave your review by clicking on comment below this post.

Thanks,

you can refer below post for child group tab-
http://www.androidhub4you.com/2013/04/android-child-group-activity-android.html