Tab Layout dalam Android

Contoh Kasus:

Saya ingin membuat layout berbentuk tab seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Buatlah satu projek Android bernama Tab dengan acitivity bernama Tab.java

Perubahan file main.xml

Bukalah file main.xml lalu rubahlah isinya menjadi seperti dibawah ini:

<?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”

android:padding=”5dp”>

<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:padding=”5dp” />

</LinearLayout>

</TabHost>

Keterangan:

  • Ini adalah layout default dari android untuk membuat layout berbentuk tab, jadi jangan dirubah id-nya.

Pembuatan Activity untuk masing-masing Tab

Untuk setiap tab itu membutuhkan 1 activity jadi untuk membuat 3 tab maka kita memerlukan 3 activity.

Buatlah satu file bernama Tab1.java dengan isi seperti kode dibawah ini:

public class Tab1 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“Kursus Private Android di a2fahmi.com”);
setContentView(textview);

}

}

Buatlah satu file bernama Tab2.java dengan isi seperti kode dibawah ini:

public class Tab2 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“Kursus Private PHP & MySQL di a2fahmi.com”);
setContentView(textview);

}

}

Buatlah satu file bernama Tab3.java dengan isi seperti kode dibawah ini:

public class Tab1 extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText(“Kursus Private JSP di a2fahmi.com”);
setContentView(textview);

}

}

Perubahan Pada Activity Tab.java

Rubahlah isi file dari Tab.java dengan kode seperti dibawah ini:

public class Tab extends TabActivity {

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tabHost = getTabHost();

TabSpec androidTab = tabHost.newTabSpec(“Android”);
TabSpec PHPTab = tabHost.newTabSpec(“PHP”);
TabSpec JSPTab = tabHost.newTabSpec(“JSP”);

androidTab.setIndicator(“Android”);
PHPTab.setIndicator(“PHP “);
JSPTab.setIndicator(“JSP”);

Intent androidIntent = new Intent(this, Tab1.class);
androidTab.setContent(androidIntent);
Intent PHPIntent = new Intent(this, Tab2.class);
PHPTab.setContent(PHPIntent);
Intent JSPIntent = new Intent(this, Tab3.class);
JSPTab.setContent(JSPIntent);

tabHost.addTab(androidTab);
tabHost.addTab(PHPTab);
tabHost.addTab(JSPTab);

}

}

Keterangan:

  • TabHost tabHost = getTabHost(), kode ini digunakan untuk membuat objek tabHost bertipe TabHost, TabHost adalah layout utama tempat tab-tab dibuat.
  • TabSpec androidTab = tabHost.newTabSpec(“Android”), Kode ini digunakan untuk mendefinisikan property untuk Tab yang bernama androidTab.
  • androidTab.setIndicator(“Android”), Kode ini digunakan untuk memberi label pada tab.
  • Intent androidIntent = new Intent(this, Tab1.class), Kode ini digunakan untuk membuat Intent bernama androidIntent.
  • androidTab.setContent(androidIntent), Kode ini digunakan untuk mengeset isi dari Tab dari androidTab dengan intent yang bernama androidIntent, jadi saat kita mengklik Tab yang berisi label android maka kita akan menuju ke activity tujuan dari androidIntent yaitu Tab1.class.
  • tabHost.addTab(androidTab), Kode ini digunakan untuk menambahkan satu tab dari objek androidTab ke objek tabHost.

Perubahan pada file AndroidManifest.xml

Bukalah file AndroidManifest.xml lalu daftarkan ketiga activity yang telah kita buat seperti kode dibawah ini:

<activity android:name=”.Tab1″ />
<activity android:name=”.Tab2″ />
<activity android:name=”.Tab3″ />

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *