Tutorial Android : Membuat Tab Layout Sederhana di Aplikasi Android

Proses acc duit beasiswa hari ini cukup membuat saya jengkel, terkesan berbelit-belit dan dipersulit. Padahal itu beasiswa dari pusat, kalau misalnya datang dari kampus sih saya masih bisa terima prosesnya dipersulit. Saya menyesal, karena dulu duitnya langsung masuk ke rekening kampus, alasannya sih langsung dipakai untuk bayar semester depan. Besok-besok kalau duit seminar nasional saya sudah cair, ogah deh dimasukin ke pembiayaan untuk semester depan, itu mah akal bulus kampus doang. Nahhh, daripada ruwet ngurusin kampus yang dari awal saya kuliah gak pernah benar (apalagi si engkong, dosen dewa yang gak pernah mau disalahkan), mending posting lagi tentang tutorial android. Tutorial sederhana kali ini membahas tentang cara membuat sebuah tab layout/tab menu di aplikasi android. Tab layout ini sama dengan tab menu di aplikasi-aplikasi pada umumnya, fungsinya agar bisa menampilkan beberapa tampilan dalam 1 halaman. Tampilan disini maksudnya adalah beberapa activity yang berbeda. Cara membuatnya cukup mudah dan berikut langkah-langkahnya. Cekidot gan…

1. Buat android project baru seperti biasanya.

2. Disini kita akan membuat 3 tab berbeda, yang membutuhkan 4 activity. 1 sebagai frame layout dan sisanya sebagai view yang akan nongol di frame tersebut. Otomatis juga membutuhkan 4 buah file layout xml. Agar keliatan lebih cakep, saya tambahkan beberapa icon dengan ekstensi .png dan saya tempatkan di folder drawable-mdpi. Sekarang kita buat terlebih dahulu layout-nya (klik kanan folder layout > New > Android XML File).

File main.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="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"/>
    </LinearLayout>
</TabHost>

File ubuntu.xml :

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

	<TextView android:text="Ini Ubuntu"
  			android:padding="15dip"
  			android:textSize="18dip"
  			android:layout_width="fill_parent"
  			android:layout_height="wrap_content"/>
</LinearLayout>

File mandriva.xml :

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

	<TextView android:text="Ini Mandriva"
  			android:padding="15dip"
  			android:textSize="18dip"
  			android:layout_width="fill_parent"
  			android:layout_height="wrap_content"/>
</LinearLayout>

File arch.xml :

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

	<TextView android:text="Ini Arch Linux"
  			android:padding="15dip"
  			android:textSize="18dip"
  			android:layout_width="fill_parent"
  			android:layout_height="wrap_content"/>
</LinearLayout>

3. Masih berhubungan dengan tampilan alias layout. Saya tambahkan sedikit agar ketika salah satu tab terseleksi, maka icon-nya berubah. Buat 3 buah file xml dan tempatkan di folder drawable.

File style_ubuntu.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/ubuntu"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/ubuntu_hover" />
</selector>

File style_mandriva.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/mandriva"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/mandriva_hover" />
</selector>

File style_arch.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/arch"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/arch_hover" />
</selector>

4. Sekarang kita melangkah ke pembuatan activity, karena sudah terdapat 1 file activity, jadinya kita hanya perlu membuat 3 activity lainnya.

File TabLayoutSederhana.java :

public class TabLayoutSederhanaActivity extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabHost = getTabHost();

        TabSpec ubuntu = tabHost.newTabSpec("Ubuntu");
        ubuntu.setIndicator("Ubuntu", getResources().getDrawable(R.drawable.style_ubuntu));
        Intent ubuntuIntent = new Intent(this, UbuntuActivity.class);
        ubuntu.setContent(ubuntuIntent);

        TabSpec mandriva = tabHost.newTabSpec("Mandriva");
        mandriva.setIndicator("Mandriva", getResources().getDrawable(R.drawable.style_mandriva));
        Intent mandrivaIntent = new Intent(this, MandrivaActivity.class);
        mandriva.setContent(mandrivaIntent);

        TabSpec arch = tabHost.newTabSpec("Arch Linux");
        arch.setIndicator("Arch Linux", getResources().getDrawable(R.drawable.style_arch));
        Intent archIntent = new Intent(this, ArchActivity.class);
        arch.setContent(archIntent);

        tabHost.addTab(ubuntu);
        tabHost.addTab(mandriva);
        tabHost.addTab(arch);
    }
}

File UbuntuActivity.java :

public class UbuntuActivity extends Activity{
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ubuntu);
    }
}

File MandrivaActivity.java :

public class MandrivaActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mandriva);
    }
}

File ArchActivity.java :

public class ArchActivity extends Activity {
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.arch);
    }
}

5. Yang terakhir, kita perlu mendaftarkan file-file activity di atas ke dalam file AndroidManifest.xml. Kalau tidak didaftarkan, dijamin aplikasi akan force closed duluan :p.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="dlmbg.pckg.tab.layout"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".TabLayoutSederhanaActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".UbuntuActivity" />
        <activity android:name=".MandrivaActivity" />
        <activity android:name=".ArchActivity" />
    </application>

</manifest>

6. Jalankan via emulator, kira-kira hasilnya seperti di bawah ini :

Tab Layout/Tab Menu ini sangat mempermudah kita untuk menangani beberapa view/activity, karena pengaksesannya yang berada dalam satu tampilan frame. OK deh, sekian dulu postingan saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!

[to_like][/to_like]