Android Tab – Put it on my tab

Android support the display of tabs within one application.

For this you need a layout with a “TabHost” which contains everything, a “TabWidget” which contains the tabs buttons with text and icons and a “Framelayout” which contains the content. Unfortunately the ADT does not support the creatioin of such a layout via the D&D editor. Create the following “tab.xml”.

<?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="match_parent"
	android:layout_height="match_parent">
	<LinearLayout android:orientation="vertical"
		android:layout_width="match_parent" android:layout_height="match_parent">
		<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">
			<Button android:id="@+id/tab1" android:text="This is a button"
				android:layout_width="match_parent" android:layout_height="match_parent"></Button>
			<Button android:id="@+id/tab2" android:text="This is another button"
				android:layout_width="match_parent" android:layout_height="match_parent"></Button>
			<TextView android:id="@+id/tab3" android:text="This is a text"
				android:layout_width="match_parent" android:layout_height="match_parent"></TextView>
		</FrameLayout>
	</LinearLayout>
</TabHost>

This layout will not be displayed correctly in the graphical edtior. See Bug for details.

Change the code of your Activity to the following.

package de.vogella.android.tabs;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabTest extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab);
        TabHost host = (TabHost)findViewById(android.R.id.tabhost);
        TabSpec spec = host.newTabSpec("tab1");
        spec.setContent(R.id.tab1);
        spec.setIndicator("Button1");
        
        host.addTab(spec);
        spec = host.newTabSpec("tab2");
        spec.setContent(R.id.tab2);
        spec.setIndicator("Next Button");
        host.addTab(spec);
        spec = host.newTabSpec("tab3");
        spec.setContent(R.id.tab3);
        spec.setIndicator("Just some text");
        host.addTab(spec);
    }
}

If you run this example you should get an activity with 3 tabs.

I hope this helps.

About Lars Vogel

Lars Vogel is the founder and CEO of the vogella GmbH and works as Eclipse and Android consultant, trainer and book author. He is a regular speaker at international conferences, He is the primary author of vogella.com. With more than one million visitors per month this website is one of the central sources for Java, Eclipse and Android programming information.
This entry was posted in Android. Bookmark the permalink.