TabWidget

A TabWidget offers the ability to easily draw an interface that uses tabs to navigate between different views. It displays a list of tab labels representing each page in the parent's tab collection. The container object for this widget is TabHost. When the user selects a tab, this object sends a message to the parent container, TabHost, to tell it to switch the displayed page. We typically won't use many methods directly on this object. The container TabHost is used to add labels, add the callback handler, and manage callbacks. We might call this object to iterate the list of tabs, or to tweak the layout of the tab list, but most methods should be called on the containing TabHost object.

Here is the layout we're using in this example:

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

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

       android:id="@+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">

              <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">

                    <AnalogClock android:id="@+id/tab1"

                           android:layout_width="fill_parent"

                           android:layout_height="fill_parent"

                           android:layout_centerHorizontal="true"/>

                    <DigitalClock android:id="@+id/tab2"

                           android:layout_width="fill_parent"

                           android:layout_height="fill_parent"

                           android:layout_centerHorizontal="true"/>

                    <Button android:id="@+id/tab3"

                           android:layout_width="fill_parent"

                           android:layout_height="fill_parent"

                           android:text="A do-nothing button"/>           

              </FrameLayout>

       </LinearLayout>

</TabHost>

The TabWidget and FrameLayout are immediate children of the TabHost, and the FrameLayout itself has children representing the various tabs. In out case, there are three tabs: a analog clock, a digital clock, and a button.

Our Java code needs to tell the TabHost which views represent the tab content and what the tab buttons should look like. This is all wrapped up in TabSpec objects. We get a TabSpec instance from the host via newTabSpec(), fill it our, and then add it to the host in the proper sequence.

TabSpec has two key methods:

• setContent() 
  Indicated what goes in the tab content for this tab, typically the android:id of the view we want shown when this tab is selected.
• setIndicator() 
  Sets the caption for the tab button and, in some flavors of this method, supplies a Drawable to represent the icon for the tab.

Note that we must call setup() on the TabHost before configuring any of these TabSpec objects. The call to setup() is not needed if we're using the TabActivity base class for our activity.

Here is our Java code:

package com.bogotobogo.TabWidget;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TabHost;

public class TabWidget extends Activity {

       @Override

       public void onCreate(Bundle icicle) {

              super.onCreate(icicle);

              setContentView(R.layout.main);

              TabHost tabs=(TabHost)findViewById(R.id.tabhost);

             

              tabs.setup();

             

              TabHost.TabSpec spec=tabs.newTabSpec("tag1");

             

              spec.setContent(R.id.tab1);

              spec.setIndicator("Analog Clock");

              tabs.addTab(spec);

      

              spec=tabs.newTabSpec("tag2");

              spec.setContent(R.id.tab2);

              spec.setIndicator("DigitalClock");

              tabs.addTab(spec); 

             

              spec=tabs.newTabSpec("tag3");

              spec.setContent(R.id.tab3);

              spec.setIndicator("Button");

              tabs.addTab(spec);

       }

}

We find our TabHost using findViewById() method, and then we call setup(). Then we get a TabSpec via newTabSpec(), supplying a tab. Given the spec, we call setContent() and setIndicator(), and then call addTab() back on the TabHost to register the tab as available for use. Finally, we can choose which tab is the one to show via setCurrentTab(), providing the 0-based index of the tab.

The results are shown below.