» » Android Tab Layout dengan Mode Swipe

Android Tab Layout dengan Mode Swipe

posted in: Tutorial | 0

Dalam artikel sebelumnya tentang Android Tab Layout . Tapi ternyata penggunakan TabHost tidak akan berfungsi di beberapa fragment. So, akan lebih baik menggunakan fragment dan viewpager untuk membuat tab layout. Tak hanya itu, kalian juga bisa melakukan swipe di antara tampilan tab yang tidak akan mungkin dilakukan jika kalian menggunakan TabHost. Nah, sekarang kita akan belajar tentang membuat android tab layout dengan swipe.

Tab Layout dengan Android Material Design

Meskipun artikel ini memberikan penjelasan secara detail tentang Tab Layout, akan lebih baik juga jika kalian mempelajari tentang Tab dengan Material Design (dengan Android Design Support Library) saat kalian sudah selesai dengan artikel ini.

Layout Overview

Mari kita lihat gambar berikut agar kalian memiliki gambaran lebih lengkap tentang arsitektur tampilan layout menggunakan ViewPager sebagai layout utama dan Fragment sebagai tampilan masing-masing layout secara individu.
Ilustrasi Desain Tab Android

Membuat Project Baru

Jika kalian belum familiar dengan ViewPager atau Fragments, jangan khawatir. Setelah mempelajari artikel ini, kalian akan mendapatkan sedikit pencerahan tentang keduanya (ceileh istilahnya haha). Langsung aja yes kita mulai dengan membuat project baru.

  1. Buat project baru melalui menu File ⇒ New ⇒ Android ⇒ Application Project. Pilih tema aplikasi (app theme) dengan Action Bar seperti gambar berikut.
    membuat project android tab
  2. Karena akan  menggunakan Fragment, perlebar tampilan activity dari FragmentActivity. Kemudian berikan juga class dari ActionBar.TabListener untuk menambahkan tab.
  3. Buka file layout activity utama (main activity layout) kalian kemudian tambahkan elemen ViewPager. Di contoh saya ini, file activity layout utama (main activity layout) saya adalah activity_main.xml
    Kode untuk activity_main.xml

  4. Kemudian buat package baru yang terpisah dari package class activity project kalian. Hal ini akan mempermudah kalian bekerja. Jadi, package baru dengan nama info.androidhive.tabsswipe.adapter
  5. I am creating a FragmentPagerAdapter class to provide views to tab fragments. Create a class called TabsPagerAdapter.java under adapter package. This adapter provides fragment views to tabs which we are going to create them later in this tutorial.
    Kode untuk TabsPagerAdapter.java

    Menambahkan Tab ke Action Bar

  6. Untuk memunculkan tab, kita tidak lagi menggunakan TabHost. Fitur tab sudah include Action bar yang bisa kita gunakan nantinya. Yang perlu kalian lakukan adalah mengaktifkannya dengan cara setNavigationMode(ActionBar.NAVIGATION_MODE_TABS). Buka MainActivity.java kemudian tambahkan tiga tab yakni Top Rated, Games, Movies ke action bar. Masukkan saja nama-nama tab tersebut dalam String array dan tambahkan ke action bar secara berulang.
    Kode untuk MainActivity.java

    Coba jalankan project kalian. Sekarang, kalian akan melihat tab yang muncul di bawah action bar.
    android tabs dengan penambahan ke action bar

    Menambahkan Tampilan Tab

    Kita sudah menambahkan fragment ke tab dengan class adapter. Untuk mempermudah, di sini saya membuat layout sederhana untuk masing-masing tab dengan sebuah label di dalam tampilan dan warna background.

    » Tampilan Tab Pertama

  7. Tab pertama yang saya buat adalah Top Rated. Buat file layout baru di dalam folder src ⇒ res kemudian berikan nama fragment_top_rated.xml dan paste kode berikut.
    Kode untuk fragment_top_rated.xml

  8. Jangan lupa buat juga fragment class activity untuk menjalankankan tampilannya. Buat class baru kemudian berikan nama TopRatedFragment.java dalam package utama kalian. Berikut kodenya.
    Kode untuk TopRatedFragment.java

    » Tampilan Tab Kedua

    Tab kedua adalah Games. Seperti langkah sebelumnya di atas, buat file layout dan activity baru untuk tab ini.

  9. Buat file layout baru di dalam folder src ⇒ res kemudian berikan nama fragment_games.xml dan pastekan kode berikut.
    Kode untuk fragment_games.xml

  10. Kemudian buat class baru dengan nama GamesFragment.java dengan kode berikut.

    » Tampilan Tab Ketiga

    Tab ketiga adalah Movies. Sama seperti dua tab yang lain, tab ini juga memerlukan file layout dan class activity.

  11. Buat file layout baru dan berikan nama fragment_movies.xml
    Kode untuk fragment_movies.xml

  12. Jangan lupa buat juga class activity dengan nama MoviesFragment.java
    Kode untuk MoviesFragment.java

    Sekarang kita coba jalankan project kalian untuk mengecek keberadaan tabnya.
    Desain tiga tampilan tab
    Dan jika dalam mode landscape, inilah hasilnya.
    Tampilan tab landscape

    Listener Perubahan Tab

    Saat kalian menjalankan project, swipe sudah bisa dijalankan. Namun, jika kalian memilih tab-nya maka tampilan tidak akan berganti otomatis. Hal ini karena ViewPager belum mengenal event perubahan tab. Kita harus menambahkannya secara manual dengan Listener perubahan tab.

  13. Lanjuuuut…dalam class MainActivity.java tambahkan kode berikut.

    Listener Perubahan Tampilan

  14. Yeah…sekarang jika kalian swipe, tab yang terpilih masih belum terlihat aktif. Di sini kita gunakan ViewPager setOnPageChangeListener() untuk mengaktifkannya secara manual.

    Sampai di sini semua proses project kalian harusnya sudah selesai dan harusnya juga sudah bisa berjalan dengan baik.

Kode Lengkap

Okeh, sebagai ringkasannya berikut adalah kode lengkap untuk class MainActivity.java class

Kode untuk MainActivity.java

Dan ini dia source lengkap yang bisa kalian download. So pasti, jangan lupa dipraktikin ya 😀

Download Tabs With Swipe Gesture

Sumber: https://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/

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.