Open In App

TabHost in Android with Example

Improve
Improve
Like Article
Like
Save
Share
Report

TabHost is a container that holds a set of tabs. Each tab consists of either the activity or the fragments. TabHost consists of two children of which one is FrameLayout (which is used to show the contents of the activity) and another one is TabWidget.(It is used to choose the tab which the user wants to open). Mostly Tabhost is used in the project with the help of the LinearLayout

Important Methods of TabHost

addTab(TabSpec tabSpec): This method is used to add the new tab onto a tab widget. Whenever a new tab is being specified using TabSpec class, one needs to add that tab in our TabHost.

// initiate TabHost
TabHost tabhost = findViewById(R.id.tabhost);
// setting up the tabhost
tabhost.setup();
     
// setting the name of the new tab                                    
TabHost.TabSpec spec = tabhost.newTabSpec("Tab One");
   
spec.setContent(R.id.tab1);
spec.setIndicator("Tab One");
// adding the tab to tabhost  
tabhost.addTab(spec);                                  

clearAllTabs(): This method is used to clear all tabs within the tab host. After adding the tab as shown above, if some want to clear the tab from TabHost, then write the below code.

tabHost.clearAllTabs(); // this method is used to clear all the tabs from tabhost

setOnTabChangedListener(OnTabChangeListener): This method is used to register a callback that needs to be invoked when the selected state of any of the items in this list changes. This method is used when one needs to invoke the callback and register it when the state changes of any selected items in the list.

setCurrentTab(int index): By default, tab hosts set the first tab position as the default position which will appear when the app is being launched, but we can explicitly change the default position of the tab using these methods. (Position starts from 0)

tabHost.setCurrentTab(1); // it will set second tab as default selected tab

Example

Let’s try to understand TabHost in detail by making a small project. A sample GIF is given below to get an idea about what we are going to do in this project. We are going to implement this project using both Java and Kotlin Programming languages for Android. 

TabHost in Android Sample GIF

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML




<?xml version="1.0" encoding="utf-8"?><!--Linear layout as the root layout-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
  
            <!-- Tab widget to select the tab -->
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
  
            <!-- FrameLayout which contains the data of the activity -->
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
  
                <!-- for tab 1 -->
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#FFC0CB"
                    android:orientation="vertical">
  
                    <!-- Text View for applying the text to the tab -->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="270dp"
                        android:text="This is Tab 1"
                        android:textColor="#000"
                        android:textSize="32sp" />
                </LinearLayout>
  
                <!-- for tab 2 -->
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#90ee90"
                    android:orientation="vertical">
  
                    <!-- Text View for applying the text to the tab -->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="270dp"
                        android:text="This is Tab 2"
                        android:textColor="#000"
                        android:textSize="32sp" />
                </LinearLayout>
  
                <!-- for tab 3 -->
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#add8e6"
                    android:orientation="vertical">
  
                    <!-- Text View for applying the text to the tab -->
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="270dp"
                        android:text="This is Tab 3"
                        android:textColor="#000"
                        android:textSize="32sp" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>


Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.widget.TabHost;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initiating the tabhost
        TabHost tabhost = findViewById(R.id.tabhost);
  
        // setting up the tab host
        tabhost.setup();
  
        // Code for adding Tab 1 to the tabhost
        TabHost.TabSpec spec = tabhost.newTabSpec("Tab One");
        spec.setContent(R.id.tab1);
  
        // setting the name of the tab 1 as "Tab One"
        spec.setIndicator("Tab One");
  
        // adding the tab to tabhost
        tabhost.addTab(spec);
  
        // Code for adding Tab 2 to the tabhost
        spec = tabhost.newTabSpec("Tab Two");
        spec.setContent(R.id.tab2);
  
        // setting the name of the tab 1 as "Tab Two"
        spec.setIndicator("Tab Two");
        tabhost.addTab(spec);
  
        // Code for adding Tab 3 to the tabhost
        spec = tabhost.newTabSpec("Tab Three");
        spec.setContent(R.id.tab3);
        spec.setIndicator("Tab Three");
        tabhost.addTab(spec);
    }
}


Kotlin




import android.os.Bundle
import android.widget.TabHost
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // initiating the tabhost
        val tabhost = findViewById<TabHost>(R.id.tabhost)
  
        // setting up the tab host
        tabhost.setup()
  
        // Code for adding Tab 1 to the tabhost
        var spec = tabhost.newTabSpec("Tab One")
        spec.setContent(R.id.tab1)
  
        // setting the name of the tab 1 as "Tab One"
        spec.setIndicator("Tab One")
  
        // adding the tab to tabhost
        tabhost.addTab(spec)
  
        // Code for adding Tab 2 to the tabhost
        spec = tabhost.newTabSpec("Tab Two")
        spec.setContent(R.id.tab2)
  
        // setting the name of the tab 1 as "Tab Two"
        spec.setIndicator("Tab Two")
        tabhost.addTab(spec)
  
        // Code for adding Tab 3 to the tabhost
        spec = tabhost.newTabSpec("Tab Three")
        spec.setContent(R.id.tab3)
        spec.setIndicator("Tab Three")
        tabhost.addTab(spec)
    }
}


Output:



Last Updated : 30 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads