Hello Tab Widget

A TabWidget offers the ability to easily draw an interface that uses tabs to navigate between different views.

1. Start a new project/Activity called HelloTabWidget.

2. Open the layout file and make it like so:

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

<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android: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"> <TextView android:id="@+id/textview1" android:layout width="fill parent" android:layout height="fill parent" android:text="this is a tab" /> <TextView android:id="@+id/textview2" android:layout width="fill parent" android:layout height="fill parent"


text="this is another tab"






layout width="fill parent"


layout height="fill parent


text="this is a third tab"





Here, we've created a TabHost that contains the entire layout of the Activity. A TabHost requires two descendant elements: a TabWidget and a FrameLayout. In order to properly layout these elements, we've put them inside a vertical LinearLayout. The FrameLayout is where we keep the content that will change with each tab. Each child in the FrameLayout will be associated with a different tab. In this case, each tab simply shows a different TextView with some text.

Notice that the TabWidget and the FrameLayout elements have specific android namespace IDs. These are necessary so that the TabHost can automatically retireve references to them, populate the TabWidget with the tabs that we'll define in our code, and swap the views in the FrameLayout. We've also defined our own IDs for each TextView, which we'll use to associate each tab with the view that it should reveal.

Of course, you can make these child views as large as complex as you'd like — instead of the TextView elements, you could start with other layout views and build a unique layout hierarchy for each tab.

3. Now we'll add our code. Open HelloTabWidget.java and make it a TabActivity.

By default, Eclipse creates a class that extends Activity. Change it to extend TabActivity:

public class HelloTabWidget extends TabActivity {

4. Now fill in the the onCreate method like this:

public void onCreate(Bundle savedlnstanceState) {



mTabHost = getTabHost();

mTabHost.addTab(mTabHost.newTabSpec("tab testl") 1").setContent(R.id.textview1));



mTabHost.addTab(mTabHost.newTabSpec("tab test2") 2").setContent(R.id.textview2));



mTabHost.addTab(mTabHost.newTabSpec("tab test3") 3").setContent(R.id.textview3));




<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">

6. That's it. Run your application.

Your application should look like this


• TabHost.TabSpec

• FrameLayout

You can include icons in your tabs by passing a Drawable when you call setIndicator() . Here's an example that uses a Drawable created from an image in the project resources:

setIndicator("TAB 1", getResources().getDrawable(R.drawable.tab icon))

0 0

Post a comment