Tab Host

Most modern Uls provide an interface element that lets the user flip through many pages of information quickly using tabs, with each "screen" of information available when its tab is pressed. Android's option is the TabHost View. Figures 11-7 through 11-10 show how it operates.

Android enables the developer to choose between three different approaches for setting the tab's content. The developer can:

• Set the content of a tab to an Intent. Figures 11-7 and 11-9 use this method.

• Use a TabContentFactory to create the tab's content on-the-fly. Figure 11-8 uses this method.

• Retrieve the content from an XML layout file, much like that of a regular Activity. Figure 11-10 uses this method.

Tabhost Image Android
Figure 11-9. The third tab of a TabHost ViewGroup

intent factory destroy intent factory destroy

Figure 11-10. The fourth tab of a TabHost ViewGroup

We'll examine each of these possibilities using a modified Activity from the ApiDemos application. The fourth tab is not part of the ApiDemos, but combines some other TabHost demonstration Activities in ApiDemos.

Let's start by looking at the tabs4.xml layout file (Example 11-7). Example 11-7. Layout file for TabHost (tabs4.xml)

<FrameLayout xmlns:android="" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:id="@+id/view4"

android:background="@drawable/green"0 android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/tabs_4_tab_4"/>©


Here are some of the highlights of the code:

O Defines a TextView view with an id of view4. We'll insert the TextView into a tab in our Java code. Notice the nice green background for this tab body.

© The referenced string is simply tab4.

And now we'll dissect the Java code that produces the tabs (Example 11-8).

Example 11-8. Java for TabHost public class Tabs4 extends TabActivity implements TabHost.TabContentFactory {

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

final TabHost tabHost = getTabHost();

LayoutInflater.from(this).inflate(R.layout.tabs4, tabHost.getTabContentView(), true);©

tabHost.addTab(tabHost.newTabSpec("tab1") .setIndicator("intent")

.setContent(new Intent(this, List1.class)));

tabHost.addTab(tabHost.newTabSpec("tab2") .setIndicator("factory", getResources().getDrawable(R.drawable.star_big_on))© .setContent(this));

tabHost.addTab(tabHost.newTabSpec("tab3") .setIndicator("destroy")

.setContent(new Intent(this, Controls2.class)


tabHost.addTab(tabHost.newTabSpec("tab4") .setIndicator("layout") .setContent(; (D

public View createTabContent(String tag) { final TextView tv = new TextView(this); tv.setText("Content for tab with tag " + tag); return tv;

Here are some of the highlights of the code:

O To implement tabs, you need to extend TabActivity instead of just Activity. This gives you all the tab functionality.

© The tabHost variable allows you to define the tabs and their contents.

© This basically says "using the LayoutInflater from my current Context, inflate the XML layout referenced by R.layout.tabs4 into the content section of the tabHost." Whew. As mentioned before, XML layout files are normally inflated automatically when setContentView runs. However, in this case the XML layout must be instantiated manually. Note that this XML layout is used only in the fourth tab.

O Sets up the first tab (Figure 11-7). The title is arbitrary, but we've called this tab intent as documentation that its contents are an Intent.

© Set the content of the first tab to the List1.class in this application. This simply brings up the referenced class in the tab. This is a slick way to make the contents of a regular application visible inside a tab.

© Now we're setting up the second tab (Figure 11-8). This is how you put an image on a tab face.

O This tab's contents are filled in by a factory method in this class. Notice that the class implements the TabHost.TabContentFactory interface.

© Set the content for the third tab (Figure 11-9) from an Intent. Using an Intent here is similar to navigating from one Activity in your application to another by using an intent. However, using tabs, the user can navigate back and forth between separate parts of your application quickly and easily.

© Adding this flag to the tabHost creates a new instance of the View each time it is displayed. In the case of the demo, all changes to the UI will be lost if you navigate away from the tab and then back to it.

© This tab displays the TextView from the XML layout item referenced by The TextView was set up in item 1 of Example 11-7.

(D This is the factory method that creates the view for the second tab. The factory must return a view that the tab will use as its content. In this case, we create a very simple TextView that displays the tag associated with the tab.

0 0

Post a comment