Jan 16, 2013

Android Tab Layout


Kali ini saya mencoba untuk mengimplementasikan Tab Layout pada Android. Tab Layout gunanya untuk dapat menampilkan beberapa activity dalam 1 tampilan.

Nah, buat dulu Android projectnya, disini saya akan menampilkan 3 buah jendela tab, jadi saya akan membuat 3 buah activity tambahan serta 3 buah layout. Setelah Jadi, Layoutnya kurang lebih akan seperti di bawah ini


Pada direktori res/layout buat 3 buah  file layout, pada project ini namanya adalah tab_photos.xml, tab_songs.xml, tab_videos.xml.  Berikut adalah kode dari masing-masing file

tab_photos.xml
tab_songs.xml


tab_videos.xml

Setelah itu, buat 3 buah activity class dengan nama TabPhotos.class, TabSongs.class, TabVideo.class. Berikut adalah kode dari masing-masing classnya

TabPhotos.class

TabSongs.class

TabVideo.class

Saya juga menambahkan beberapa icon dengan format .png yang ditambahkan pada masing-masing folder drawable-hdpi, drawable-ldpi, drawable-mdpi, drawable-xhdpi.

Pada file activity_main.xml berikut adalah kodenya

Pada MainActivity.class berikut adalah kodenya

Untuk tabnya sendiri, icon akan berubah jika tab dipilih, state-nya didefinisikan dalam file .xml. Berikut adalah isi dari masing-masing filenya

icon_tab_photos.xml

icon_tab_music.xml

icon_tab_video.xml

Pada file AndroidManifest.xml tambahkan activity-activity yang sudah kita buat tadi, berikut adalah isinya

Nah, running deh projectnya.. Hasilnya adalah seperti berikut




Oh ya, untuk emulatornya saya pakai yang 2.3.3, karena kalau pakai yang versi lebih dari 3.0 iconnya ga akan muncul. Semoga berguna :D

*** Hanya Sekedar Catatan ***
***      Biar Ga Lupa     ***


referensi:
http://www.androidhive.info/2011/08/android-tab-layout-tutorial/
http://gedelumbung.com/tutorial-android-membuat-tab-layout-sederhana-di-aplikasi-android/

Catatan Terkait:

1 comment:

  1. kawan?kenapa di hanphone gak tampil ya?solusinya gmn?

    ReplyDelete