TabHost

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

To display a Tab Bar, we need 3 things.

• TabHost ( main container of tab view )
• TabWidget ( used to navigate between tabs )
• FrameLayout ( for tab content )

 

Important Methods Of TabSpec:

Let’s discuss some common methods of a TabSpec which are used to specify the indicator and content for a Tab.

1. setIndicator(CharSequence label): This method is used to set the text to show on tab. In this we specify CharSequence type value to display a label for Tab.

Below we set the “Tab 1” as an indicator ( label ) for a tab.

TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator("Tab 1"); // set the “Tab 1” as an indicator for a tab

Important Note: Mostly all methods described here needs to be used to make TabHost work. So do refer to the example at the end of this article to learn how to use all these method to create TabHost in Android.

2. setIndicator(CharSequence label,Drawable icon): This method is used to Specify a label and icon as the tab indicator. In this method you specify char sequence type value to display a label for tab and drawable to display an icon on tab.

Below we set the “Tab 1” as an indicator ( label ) and ic_launcher icon for a tab.

TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator("Tab 1",getResources().getDrawable(R.drawable.ic_launcher)); // set the label and icon an indicator for a tab

3. setContent(Intent intent): This method is used to specify an intent to use to launch an activity as the tab content. Whenever a user click on this tab an activity is open and display the content.

Below we set an intent that is used to launch an activity as the tab content.

TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator(view); // set the “Tab 1” as an indicator

Intent intent = new Intent(this, MyActivity.class);

tabSpec.setContent(intent); // specify an intent to use to launch an activity as the tab content

---

Important Methods Of TabHost:

Let’s discuss some important methods of a TabHost which are used to configure Tabs in our application.

1. addTab(TabSpec tabSpec): This method is used to add a tab onto a tab widget. Whenever we specify a new tab using TabSpec class we need to add that tab in our TabHost.

Below is an example code with explanation in which we specify a tab using TabSpec class and then add that tab in our tab host using addTab method.

TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator(view); // set the “Tab 1” as an indicator

Intent intent = new Intent(this, MyActivity.class);

tabSpec.setContent(intent); // specify an intent to use to launch an activity as the tab content

tabHost.addTab(tabSpec); // add a tab in Tab widget

2. clearAllTabs(): This method is used to remove all the tabs from the tab widget associated with TabHost.

Below is an example code in which Firstly we add two tabs and then remove all the tabs from a tab widget.

TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator("Tab 1"); // set the “Tab 1” as an indicator

Intent intent = new Intent(this, MyActivity.class);

tabSpec.setContent(intent);

TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("tab2"); // Create a new TabSpec using tab host

tabSpec1.setIndicator("Tab 2"); // set the “Tab 2” as an indicator

Intent intent1 = new Intent(this, MyActivity.class);

tabSpec1.setContent(intent1); // specify an intent to use to launch an activity as the tab content

tabHost.addTab(tabSpec); // add first tab in Tab widget

tabHost.addTab(tabSpec1); // add second tab in Tab widget

tabHost.clearAllTabs(); // clear all the tabs from tab widget

3. setCurrentTab(int index): This method is used to set the current selected tab from the tab widget. By default a tab host set first tab as current tab but we can change it by using this function.

Below is an example code in which firstly we add two tabs and then set the second tab as current tab.

TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); // initiate TabHost

TabHost.TabSpec tabSpec = tabHost.newTabSpec("tab1"); // Create a new TabSpec using tab host

tabSpec.setIndicator("Tab 1"); // set the “Tab 1” as an indicator

Intent intent = new Intent(this, MyActivity.class);

tabSpec.setContent(intent);

TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("tab2"); // Create a new TabSpec using tab host

tabSpec1.setIndicator("Tab 2"); // set the “Tab 2” as an indicator

Intent intent1 = new Intent(this, MyActivity.class);

tabSpec1.setContent(intent1); // specify an intent to use to launch an activity as the tab content

tabHost.addTab(tabSpec); // add first tab in Tab widget

tabHost.addTab(tabSpec1); // add second tab in Tab widget

tabHost.setCurrentTab(1); // set second tab as current selected tab

4. setOnTabChangedListener(OnTabChangeListenerl): This method is used to register a callback to be invoked when the selected state of any of the items in this list changes.

Below we show how to use setOnTabChangedListener in TabHost.

// perform set on tab changed listener on tab host

tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

@Override

public void onTabChanged(String tabId) {

// Add code Here

}

});

Code -

activity_main.xml

<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"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#ffc916"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="This is tab 1" />

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#da8200"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="This is tab 2" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#5b89ff"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="This is tab 3" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity

{

    TabHost tabHost;

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        TabHost host = (TabHost)findViewById(R.id.tabHost);

        host.setup();



        //Tab 1

        TabHost.TabSpec spec = host.newTabSpec("Tab One");

        spec.setContent(R.id.tab1);

        spec.setIndicator("Tab One");

        host.addTab(spec);



        //Tab 2

        spec = host.newTabSpec("Tab Two");

        spec.setContent(R.id.tab2);

        spec.setIndicator("Tab Two");

        host.addTab(spec);



        //Tab 3

        spec = host.newTabSpec("Tab Three");

        spec.setContent(R.id.tab3);

        spec.setIndicator("Tab Three");

        host.addTab(spec);

    }

}

22