Beginning Android

FrameLayout.

This is similar to the approach that Mozilla’s XUL takes. In XUL’s case, the tabbox element corresponds to Android’s TabHost, the tabs element corresponds to TabWdget, and tabpanels corresponds to the FrameLayout.

The Idiosyncrasies

There are a few rules to follow, at least in this milestone edition of the Android toolkit, in order to make these three work together:

• You mus t give the TabWidget an android:id of @android:id/tabs.

• You must set aside some padding in the FrameLayout for the tab buttons.

• If you wish to use the TabActivity, you must give the TabHost an android:id of @android:id/tabhost.

TabActivity, like ListActivity, wraps a common UI pattern (activity made up entirely of tabs) into a pattern-aware activity subclass. You do not necessarily have to use TabActivity — a plain activity can use tabs as well.

With respect to the FrameLayout padding issue, for whatever reason, the TabWidget does not seem to allocate its own space inside the TabHost container. In other words, no matter what you specify for android:layout_height for the TabWidget, the FrameLayout ignores it and draws at the top of the overall TabHost. Your tab contents obscure your tab buttons. Hence, you need to leave enough padding (via android:paddingTop) in FrameLayout to “shove” the actual tab contents down beneath the tab buttons.

In addition, the TabWidget seems to always draw itself with room for icons, even if you do not supply icons. Hence, for this version of the toolkit, you need to supply at least 62 pixels of padding, perhaps more depending on the icons you supply.

For example, here is a layout definition for a tabbed activity, from Fancy/Tab:

<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android='http://schemas.android.com/apk/res/android'
 android:orientation='vertical'
 android:layout_width='fill_parent'
 android:layout_height='fill_parent'>
 <TabHost android:id='@+id/tabhost'
  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'
   android:paddingTop='62px'>
   <AnalogClock android:id='@+id/tab1'
    android:layout_width='fill_parent'
    android:layout_height='fill_parent'
    android:layout_centerHorizontal='true'
   />
   <Button android:id='@+id/tab2'
    android:layout_width='fill_parent'
    android:layout_height='fill_parent'
    android:text='A semi-random button'
   />
  </FrameLayout>
 </TabHost>
</LinearLayout>

Note that the TabWidget and FrameLayout are immediate children of the TabHost, and the FrameLayout itself has children representing the various tabs. In this case, there are two tabs: a clock and a button. In a more complicated scenario, the tabs are probably some form of container (e.g., LinearLayout) with their own contents.

Wiring It Together

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

The two key methods on TabSpec are:

• setContent(), where you indicate what goes in the tab content for this tab, typically the android:id of the view you want shown when this tab is selected

• setIndicator(), where you provide the caption for the tab button and, in some flavors of this method, supply a Drawable to represent the icon for the tab

Note that tab “indicators” can actually be views in their own right, if you need more control than a simple label and optional icon.

Also note that you must call setup() on the TabHost before configuring any of these TabSpec objects. The call to setup() is not needed if you are using the TabActivity base class for your activity.

For example, here is the Java code to wire together the tabs from the preceding layout example:

package com.commonsware.android.fancy;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
public class TabDemo 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);