Freelancer's Playground! New knowledges every now and then

Menggunakan View Di Dalam TabHost

Tutorial kali ini tentang TabHost dan Tabwidget di android. Banyak tutorial di internet, yang membahas tentang TabHost. Tapi, rata-rata tutorial tersebut menggunakan Activity sebagai isi dari tab. Permasalahannya, saya tidak ingin menggunakan Activity. Seperti umumnya penggunaan Tab, saya ingin agar isinya, didapat dari View.

Setelah berkali-kali coba mengimplementasikan, akhirnya berhasil juga. Ternyata, triknya cukup sederhana. Pertama, kita harus membuat struktur TabHost dan TabWidget yang sesuai dengan ketentuan android:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android: orientation="vertical" >

    <TabHost
        xmlns:android="http://schemas.android.com/apk/res/android"
        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="wrap_content"
            android: paddingTop="65px" >

        </FrameLayout>
    </TabHost>

</LinearLayout>

Kalau dengan gambar, strukturnya adalah seperti ini:

Perhatikan, dalam satu TabHost, terdapat MAX satu TabWidget dengan ID @android:id/tabs. Kemudian, di dalam TabWidget tersebut, terdapat MAX satu FrameLayout dengan ID @android:id/tabcontent. Terakhir, di dalam FrameLayout tersebut, kita bisa menaruh sebanyak mungkin View sesuai dengan kebutuhan. Nanti akan dijelaskan penggunaannya.

Kalau struktur TabHost dan TabWidget tidak sesuai dengan kode di atas, maka akan menghasilkan Exception. Silahkan dicoba, pasti akan ada error semacam:

java.lang.RuntimeException: Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'

Sekarang, mari kita mulai memasukkan kode View dan setup TabHost. Buka lagi file layout xml anda dan sisikan kode berikut ke dalam <FrameLayout></FrameLayout>:

<LinearLayout
	android:id="@+id/tabContent1"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" >

	<ImageView
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:src="@drawable/ic_launcher"/>
</LinearLayout>

<LinearLayout
	android:id="@+id/tabContent2"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" >

	<TextView
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="isi tab content 2" />
</LinearLayout>

<LinearLayout
	android:id="@+id/tabContent3"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" >

	<TextView
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="isi tab content 3" />
</LinearLayout>

Lalu, untuk Activity, tambahkan kode berikut di dalam onCreate(). Letakkan setelah setContentView(R.layout.main);:

TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();

TabHost.TabSpec spec1 = tabHost.newTabSpec( "Populars" );
spec1.setContent(R.id.tabContent1);
spec1.setIndicator( "Populars" );
tabHost.addTab(spec1);

TabHost.TabSpec spec2 = tabHost.newTabSpec( "Trendings" );
spec2.setContent(R.id.tabContent2);
spec2.setIndicator( "Trendings" );
tabHost.addTab(spec2);

TabHost.TabSpec spec3 = tabHost.newTabSpec( "Search" );
spec3.setContent(R.id.tabContent3);
spec3.setIndicator( "Search" );
tabHost.addTab(spec3);

Coba jalankan, hasilanya akan menjadi seperti:

Pada contoh ini, untuk view, saya masih menggunakan yang sederhana, seperti ImageView dan TextView. Tapi, kalau anda ingin complex, bisa saja diganti menjadi, misal: ListView, LinearLayout, TableLayout, dll. Sesuaikan dengan kebutuhan saja.

Download