How do I use tabHost for Android?


Before getting into example we should know what is tab host in android. Tab host holds set of tabs. Each tab contains either fragment or activity as per project specification. The user can scroll tabs from left to right or right to left.

This example demonstrates how to use tab host in android.

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.

Step 2 − Add the following code to res/layout/activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">
   <TabHost android:id="@+id/tabhost"
      android:layout_width="match_parent"
      android:layout_height="match_parent" >
      <LinearLayout
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">
         <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
         <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <LinearLayout
               android:id="@+id/tab1"
               android:layout_width="match_parent"
               android:layout_height="match_parent">
               <Button
                  android:id="@+id/button"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="tab1" />
            </LinearLayout>
            <LinearLayout
               android:id="@+id/tab2"
               android:layout_width="match_parent"
               android:layout_height="match_parent">
               <Button
                  android:id="@+id/button2"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="tab2" />
            </LinearLayout>
         </FrameLayout>
      </LinearLayout>
</TabHost>
</LinearLayout>

In the above layout, we have declared frame layout as Tab widget child (According to android.com it required frame layout as content for tab widget).

Step 3 − Add the following code to src/MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.TabHost;
public class MainActivity extends AppCompatActivity {
   RadioButton radioButton;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      TabHost tabs = (TabHost) findViewById(R.id.tabhost);
      tabs.setup();
      TabHost.TabSpec spec = tabs.newTabSpec("tag1");
      spec.setContent(R.id.tab1);
      spec.setIndicator("First");
      tabs.addTab(spec);
      spec = tabs.newTabSpec("tag2");
      spec.setContent(R.id.tab2);
      spec.setIndicator("second");
      tabs.addTab(spec);
   }
}

Step 4 − No need to change manifest.xml file.

Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from an android studio, open one of your project's activity files and click Run   icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen.

Now click on the second tab. it should give a result as shown below -

Updated on: 30-Jul-2019

440 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements