Tutorial Android Tab Layout

Okey, kali ini kita akan belajar pembuatan aplikasi android tentang Android Tab Layout dengan bahasa pemrograman native alias menggunakan Java, XML, dan kawan-kawannya. Yang perlu diperhatikan, jika kalian menggunakan bahasa native maka kalian akan sering bertemu dengan pemrograman. Akan berbeda jika kalian menggunakan aplikasi yang tanpa koding. Namun, akan banyak sekali kelebihan yang akan kalian temukan jika menggunakan bahasa native tentunya.

Okey, cus inilah penampakan hasil akhir aplikasi yang akan kalian buat nantinya. Berisi tiga tab layout seperti gambar berikut.

Dalam masing-masing tab tersebut akan ada tampilan layar yang berbeda sesuai dengan tabnya. Hokelah langsung kita eksekusi saja ya. Btw, biasanya project dengan native ini saya buat dengan Android Studio. Dulu sih sempet pake Eclipse, tapi sepertinya sekarang sudah tidak didukung lagi oleh Google. So, beralihlah semua ke Android Studio.

Buat project baru dengan File -> New -> Android Project and berikan nama activity dengan AndroidTabLayoutActivity
Sekarang buka AndroidTabLayoutActivity dan kita buat class untuk TabActivity
```
public class AndroidTabLayoutActivity extends TabActivity {
```

Kemudian buka file main.xml di dalam folder res -> layout dan tambahkan kode berikut.

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

Sekarang yang kita butuhkan adalah 3 activity dan 3 layout dengan xml untuk tiga tab. So, kita buat tiga activity dengan klik kanan folder package activity -> New -> Class. Berikan nama masing-masing PhotosActivity.java, SongsActivity.java, dan VideosActivity.java. Kemudian masukkan kode berikut ke maisng-masing layout yang sesuai.
Kode berikut untuk PhotosActivity.java

package com.example.androidtablayout;
 
import android.app.Activity;
import android.os.Bundle;
 
public class PhotosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.photos_layout);
    }
}

Kode berikut untuk SongsActivity.java

package com.example.androidtablayout;
 
import android.app.Activity;
import android.os.Bundle;
 
public class SongsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.songs_layout);
    }
}

Kode berikut untuk VideosActivity.java

package com.example.androidtablayout;
 
import android.app.Activity;
import android.os.Bundle;
 
public class VideosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.videos_layout);
    }
}

Sekarang buat 3 layout xml dengan klik kanan pada res/layout -> New -> Android XML File kemudian berikan nama photos_layout.xml, songs_layout.xml, dan videos_layout.xml lalu masukkan kode berikut ke masing-masing layout yang sesuai.
Kode untuk photos_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
   
  <!-- Screen Design for Photos -->
  <TextView android:text="PHOTOS HERE"
            android:padding="15dip"
            android:textSize="18dip"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
     
</LinearLayout>

Kode untuk songs_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
   
  <!-- Screen Design for the SONGS -->
  <TextView android:text="SONGS HERE"
            android:padding="15dip"
            android:textSize="18dip"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
</LinearLayout>

Kode untuk videos_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
   
  <!--  Screen Design for VIDEOS -->
  <TextView android:text="VIDEOS HERE"
            android:padding="15dip"
            android:textSize="18dip"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
</LinearLayout>

Nah, sekarang pada setiap tab akan kita tambahkan ikon. Tentunya pastikan kalian sudah menyiapkan desain untuk masing-masing ikon tab tersebut. Desain pada masing-masing ikon memiliki tiga ukuran yakni in 48 x 48 px, 32 x 32 px, dan 24 x 24 px lalu posisikan ikon tersebut ke dalam folder drawable-hdpi, drawable-mdpi and drawable-ldpi sesuai ukurannya. DI sini saya menggunakan ikon seperti gambar berikut ya.

Langkah selanjutnya adalah memanggil gambar ikon tersebut dalam file xml untuk konfigurasi posisi normal (default) dan hover. Kita memiliki tiga ikon berarti kita juga harus membuat 3 file xml di dalam folder/direktori drawable-hdpi. Masukkan kode berikut untuk masing-masing xml ikon.
Kode untuk icon_photos_tab.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/photos_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/photos_white" />
</selector>

Kode untuk icon_songs_tab.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/songs_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/songs_white" />
</selector>

Kode untuk icon_videos_tab.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/videos_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/videos_white" />
</selector>

Sekarang buka AndroidTabLayoutActivity.java dan masukkan kode berikut. Dalam kode ini, kita membuat tiga TabSepcs dan menambahkannya ke TabHost.
Kode untuk AndroidTabLayoutActivity.java

package com.example.androidtablayout;
 
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
 
public class AndroidTabLayoutActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
         
        TabHost tabHost = getTabHost();
         
        // Tab for Photos
        TabSpec photospec = tabHost.newTabSpec("Photos");
        // setting Title and Icon for the Tab
        photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab));
        Intent photosIntent = new Intent(this, PhotosActivity.class);
        photospec.setContent(photosIntent);
         
        // Tab for Songs
        TabSpec songspec = tabHost.newTabSpec("Songs");       
        songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab));
        Intent songsIntent = new Intent(this, SongsActivity.class);
        songspec.setContent(songsIntent);
         
        // Tab for Videos
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_videos_tab));
        Intent videosIntent = new Intent(this, VideosActivity.class);
        videospec.setContent(videosIntent);
         
        // Adding all TabSpec to TabHost
        tabHost.addTab(photospec); // Adding photos tab
        tabHost.addTab(songspec); // Adding songs tab
        tabHost.addTab(videospec); // Adding videos tab
    }
}

Now, semua yang dibutuhkan sudah lengkap dan sebelum menjalankan project, pastikan untuk menambahkan activity baru di file AndroidManifest.xml. Buka file AndroidManifest.xml file kemudian modifikasi kodenya seperti berikut.
Kode untuk AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.androidtablayout"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />
 
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".AndroidTabLayoutActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
         
        <!--  Songs Activity -->
        <activity android:name=".SongsActivity" />
         
        <!--  Videos Activity -->
        <activity android:name=".VideosActivity" />
         
        <!--  Photos Activity -->
        <activity android:name=".PhotosActivity" />
 
    </application>
</manifest>

Finally, well done. Sekarang kita tes project-nya dengan klik kanan folder -> Run As -> Android Application.

Nah, sudah muncul kan ketiga tab navigasinya? Kalau belum, corat-coret deh dengan berkomentar. Diriku akan coba bantu untuk dirimu asalkan tidak menyerah karena pusing koding yes. Berikut kode lengkapnya yang bisa kalian download. Selamat belajar 🙂
Download Android Tab Layout