Widget: TabHost

TabHost merupakan menu dengan tampilan secara horizontal. Maximal menu yang akan tampil pada TabHost adalah 5 buah. Jika melebihi dari 5 tab, sebaiknya kombinasikan dengan ListView, silakan lihat Widget: Spinner. Struktur dari TabHost sebagai berikut.

Dalam satu TabHost, terdapat maximal satu TabWidget dengan android:id=@android:id/tabs. Kemudian, didalam TabWidget tersebut terdapat maximal satu FrameLayout dengan android:id=@android:id/tabcontent. Nah, didalam FrameLayout tersebutlah bisa diletakkan sebanyak mungkin View sesuai dengan kebutuhan. Berikut langkah pembuatannya.
Buat file layout dengan nama "activity_tab.xml" pada folder res>layout.
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost1">
    <TabWidget
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/tabs">       
    </TabWidget>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@android:id/tabcontent">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab1"
            android:orientation="vertical"
            android:paddingTop="60px">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/gambar">               
            </ImageView>           
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/tab2"
            android:orientation="vertical"
            android:paddingTop="60px">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="100px"
                android:text="this is tab 2"
                android:id="@+id/txt2">               
            </TextView>                           
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/tab3"
            android:orientation="vertical"
            android:paddingTop="60px">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="100px"
                android:text="this is tab 3"
                android:id="@+id/txt3">               
            </TextView>                           
        </LinearLayout>       
    </FrameLayout>
</TabHost>   

Perhatikan bagian ImageView terdapat android:src="@drawable/gambar". Skenarionya, ketika klik TAB 1 akan tampil gambar seperti yang tersimpan pada folder res>drawable. Jadi Anda harus membuat folder baru terlebih dahulu pada folder res dengan nama "drawable". Kemudian paste file dengan nama "gambar.png" misalnya, pada folder drawable tersebut.

Selanjutnya, buat file java dengan nama "Tab.java" pada folder src.
package com.example.contoh;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class Tab extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        TabHost tabHost = (TabHost) findViewById(R.id.tabHost1);
        tabHost.setup();       
        TabSpec tabSpec1 = tabHost.newTabSpec("Tab 1");
        tabSpec1.setContent(R.id.tab1);
        tabSpec1.setIndicator("Tab 1");
        TabSpec tabSpec2 = tabHost.newTabSpec("Tab 2");
        tabSpec2.setContent(R.id.tab2);
        tabSpec2.setIndicator("Tab 2");
        TabSpec tabSpec3 = tabHost.newTabSpec("Tab 3");
        tabSpec3.setContent(R.id.tab3);
        tabSpec3.setIndicator("Tab 3");
        tabHost.addTab(tabSpec1);
        tabHost.addTab(tabSpec2);
        tabHost.addTab(tabSpec3);
    }
}

Terakhir, deklarasikan kelas java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.
<activity
            android:name="com.example.contoh.Tab"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Berikut tampilannya.