Android TabHost Example

android.widget.TabHost is a widget that can add more tabs in android app. Each tab can has it’s own content. This article will show you examples about how to use it.

1. TabHost Methods.

1. newTabSpec(String tabName) : Create a new TabSpec object.
2. addTab(TabSpec tabSpec) : Add a tab in TabHost.
3. setOnTabChangedListener(OnTabChangeListener listener) : Set a on tab change listener which will listen to tab change event.

2. Create TabHost Steps.

1. Create an activity that extends android.app.TabActivity.
2. Create a layout xml file which includes TabHost xml element.
3. Use TabActivity’s getTabHost() method to get TabHost object.
4. Use TabHost’s newTabSpec(String tabName) method to create a new tab.
5. Use TabHost’s addTab(TabSpec tabSpec) method to add new tab.
6. For a TabSpec, you can set either a String or a custom View object as the indicator. The indicator is located at the top of each tab.

3. TabHost Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/ZS1dv0bLhZs

TabHostActivity.java

package com.dev2qa.example;

import android.app.AlertDialog;
import android.app.TabActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

import java.util.ArrayList;
import java.util.List;

import static com.dev2qa.example.R.id.phoneList;
import static com.dev2qa.example.R.id.smsList;

public class TabHostActivity extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Get TabHost object.
        TabHost tabHost = this.getTabHost();

        // Initiate the tabhost layout.
        LayoutInflater layoutInflater = LayoutInflater.from(this);
        layoutInflater.inflate(R.layout.activity_tab_host, tabHost.getTabContentView(), true);

        // Create sms tab.
        TabSpec smsTabSpec = tabHost.newTabSpec("Short Message Tab");
        // Create the view object that will be displayed in sms tab.
        //TextView smsTabTitle = new TextView(this);
        //RadioButton smsTabTitle = new RadioButton(this);
        CheckBox smsTabTitle = new CheckBox(this);
        smsTabTitle.setText("Short Message");
        smsTabTitle.setAllCaps(false);
        smsTabTitle.setTextColor(Color.BLUE);
        smsTabTitle.setGravity(Gravity.CENTER);
        smsTabTitle.setTextSize(20);
        // Hidden the checkbox.
        smsTabTitle.setButtonDrawable(null);
        // Set the CheckBox object use a selector defined in tab_spec_background_selector.xml
        // to show different background for different checkbox state(state_checked="true", state_checked="false").
        smsTabTitle.setBackground(getDrawable(R.drawable.tab_spec_background_selector));
        // Add checkbox as sms tab indicator...
        smsTabSpec.setIndicator(smsTabTitle);
        // Set LinearLayout with id smsTab defined in activity_tab_host.xml as sms Tab content.
        smsTabSpec.setContent(R.id.smsTab);
        // Create the sms tab display short message list in ListView.
        List<String> smsListData = new ArrayList<String>();
        smsListData.add("Learn android from dev2qa.com");
        smsListData.add("Hello this is android phone.");
        smsListData.add("Android is very good.");
        smsListData.add("I love android.");
        smsListData.add("Java is still very popular.");
        smsListData.add("Hi android developer.");
        // Create short message data adapter.
        ArrayAdapter<String> smsListAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,android.R.id.text1, smsListData);
        ListView smsListView = (ListView)findViewById(smsList);
        // Add data adapter int sms ListView.
        smsListView.setAdapter(smsListAdapter);
        // Add sms tab in tabHost.
        tabHost.addTab(smsTabSpec);


        // Create phone tab.
        TabSpec phoneTabSpec = tabHost.newTabSpec("Phone Tab");
        // Add phone tab indicator.
        phoneTabSpec.setIndicator("Phone Call");
        // Set LinearLayout with id phoneTab defined in activity_tab_host.xml as phone Tab content.
        phoneTabSpec.setContent(R.id.phoneTab);
        // Create phone number list.
        List<String> phoneListData = new ArrayList<String>();
        phoneListData.add("13901234567");
        phoneListData.add("13901234577");
        phoneListData.add("13901234587");
        phoneListData.add("13901234597");
        phoneListData.add("13901234568");
        phoneListData.add("13901234569");
        // Create phone ListView data adapter.
        ArrayAdapter<String> phoneListAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,android.R.id.text1, phoneListData);
        ListView phoneListView = (ListView)findViewById(phoneList);
        // Add phone number in ListView.
        phoneListView.setAdapter(phoneListAdapter);
        // Add phone tab in tabHost.
        tabHost.addTab(phoneTabSpec);

        // Response to tab change event.
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String s) {
                AlertDialog alertDialog = new AlertDialog.Builder(TabHostActivity.this).create();
                alertDialog.setMessage("You select tab " + s);
                alertDialog.show();
            }
        });
    }
}

activity_tab_host.xml

This file is saved in android project app / res / layout folder.

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabHostExample"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- SMS tab content.-->
    <LinearLayout
        android:id="@+id/smsTab"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ListView
            android:id="@+id/smsList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <!-- Phone tab content.-->
    <LinearLayout
        android:id="@+id/phoneTab"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ListView
            android:id="@+id/phoneList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</TabHost>

tab_spec_background_selector.xml

This file is used as backgroud selector for short message tab indicator. It is saved in android project app / res / drawable folder.

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

    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@android:color/holo_red_light" />
            <item android:bottom="2dp" android:drawable="@android:color/white" />
        </layer-list>
    </item>

    <item android:state_checked="false">
        <layer-list>
            <item android:drawable="@android:color/darker_gray" />
        </layer-list>
    </item>

</selector>