Tutorial Android Tab Layout

posted in: Tutorial | 0

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.
hasil akhir tab layout

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.

  1. Buat project baru dengan File -> New -> Android Project and berikan nama activity dengan AndroidTabLayoutActivity
  2. Sekarang buka AndroidTabLayoutActivity dan kita buat class untuk TabActivity
  3. Kemudian buka file main.xml di dalam folder res -> layout dan tambahkan kode berikut.
  4. 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
    Kode berikut untuk SongsActivity.java
    Kode berikut untuk VideosActivity.java
  5. 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
    Kode untuk songs_layout.xml
    Kode untuk videos_layout.xml
  6. 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.
    ukuran ikon
  7. 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
    Kode untuk icon_songs_tab.xml
    Kode untuk icon_videos_tab.xml
  8. Sekarang buka AndroidTabLayoutActivity.java dan masukkan kode berikut. Dalam kode ini, kita membuat tiga TabSepcs dan menambahkannya ke TabHost.
    Kode untuk AndroidTabLayoutActivity.java
  9. 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
  10. 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

Sumber: https://www.androidhive.info/2011/08/android-tab-layout-tutorial/

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.