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]Download Aplikasi[/to_like]

12 comments

  1. barai Reply

    [tanya]
    gan gimana cara parsing web video online,,, cz ane mau cba bikin applikasi yang bisa nampilin video cctv di android.
    mohon pencerahaan nya

  2. budi Reply

    bagus tutornya bli….ne nyobab copy paste ehh malah eror pake persi 8 proyo…
    mau pake tugas…tiap tab select ke mysql 😀

  3. picas Reply

    Bro, gimana cara ubah background hitam jadi putih atau default..?

  4. aminvincent Reply

    TabHost tabHost = getTabHost();
    gan ada msalah disitu,..gmn cara perbaikinya yah,..dengan keterangan sebagai berikut ?
    undifine the method getTabHost () for the type main

    mhon bantuannya yah,..thnaks

  5. aminvincent Reply

    maaf mas,..sudah fix ternyata saya salah dalam extends Activity nya,…krn saya tidak meniru persih conroh diatas,..
    TabLayoutSederhanaActivity extends TabActivity

    thanks buat tutorialnya…

  6. Anne Reply

    folder-folder yg ada di res punya saya g ada drawable nya tapi folder-folder lainnya lebih banyak. lalu di kasih mana style_madriva.xml dkknya?

  7. cucuruswana Reply

    mas punya saya error “unfortunately, (nama project) has stopped.” itu kenpa yah…?

  8. dilla savira Reply

    thanks tutorialnya ya mas ,,
    mas saya mau nanya ,
    punya saya gambarnya gk tampil mas, caranya gmna ya biar gambarnya tampil ?

  9. Rifky Rangga Reply

    Kok merah-merah yah< kurang import apa bang yang di TabLayoutSederhana.java

  10. ferdyan Reply

    mas cari ganti warna di tab nya dari warna hitam ke warna putih gimana ?

Leave a Reply

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