Tab Layout dan View Pager dengan Kotlin

Setelah sebelumnya kita membahas tentang Bottom Navigation, sekarang kita akan belajar tentang Tab Layout dan ViewPager2. sebenarnya tab layout mirip dengan bottom navigation namun letaknya biasanya ada di bagian atas, walau ada juga yang membuat custom tab layout yang berada di bawah.

Apa itu Tab Layout? Tab Layout adalah komponen yang digunakan untuk membuat sebuah tab horizonal di dalam android studio. dalam pembuatan tab layout biasanya dikombinasi dengan viewpager untuk memberikan kemudahan berpindah tab hanya dengan swipe. tab layout memiliki 2 tab mode yaitu fixed dan scrollable, gambar diatas merupakan contoh dari tab mode fixed.

Jika bottom navigation tidak di sarankan memiliki lebih dari 5 navigasi, tab layout justru bisa dan boleh lebih dari itu dikarnakan memiliki tab layout mode scrollable yang dapat digunakan saat navigasi melebihi ukuran layar.

Tab Layout merupakan bagian dari komponen material design selain bottom navigation dan navigation drawer, untuk memberikan pengalaman UX terbaik kepada user kita harus memperhatikan dalam pembuatan tampilan UI, silahkan baca aturan aturan dalam penggunaan tab layout melalui tautan tersebut.

Latihan

android tablayout custom tab view android tablayout get selected tab

Seperti biasa buat project baru dengan nama Latihan Tab Layout (Empty Activity) minimum sdk 21 dan language kotlin, jika sudah klik kanan pada folder dimana letak MainActivity kita berada lalu tambahkan package baru dengan nama fragment.

Buat 3 buah Blank Fragment dalam folder fragment yang baru saja dibuat dengan nama ChatFragment, StatusFragment, CallFragment dan sesuaikan kodenya seperti berikut, cara ini bertujuan untuk mengelompokkan class agar terlihat rapih dan mudah dipahami jika sudah kompleks.

Buat lagi 1 class dengan nama TabAdapter yang akan digunakan sebagai adapter, kemudian sesuaikan kodenya dan ubah juga strings.xml dan kedua file themes.xml didalam folder themes.

Pada folder res buat lah folder baru dengan cara klik kanan > New > Android Resource Directory > kemudian ubah Resource Typenya ke color dan klik Ok, setelah itu klik kanan pada folder color > New > Color Resource File > dan masukan nama tab_icon_color.xml dan sesuaikan kodenya seperti berikut.

Terakhir kita sesuaikan kode untuk MainActivity danĀ  activity_main.xml seperti dibawah

Tab Layout dan View Pager dengan Kotlin

Penjelasan

private val TAB_TITLES = intArrayOf(
R.string.title_chat,
R.string.title_status,
R.string.title_call
)

Pada class MainActivity terdapat variable TAB_TITLES yang berisi 3 judul yang akan digunakan pada tab yang kita buat, array ini berasal dari strings.xml, untuk menunjukan dari mana ia berasa bisa dilakukan dengan cara menekan ctrl + klik pada title_chat misalnya.

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.text = resources.getString(TAB_TITLES[position])
tab.icon = ContextCompat.getDrawable(this,TAB_ICONS[position])
}.attach()

Sedangkan pada bagian onCreate() kita menggunakan TabLayoutMediator untuk mengubungkan tab layout dengan view pager, serta mengatur judul dan icon tab sesuai posisi dari tabnya.

Selanjutnya pada class TabAdapter kita melakukan extends pada base adapter FragmentStateAdapter mengimplementasinya 2 fungsinya yaitu getItemCount() dan createFragment(). pada fungsi getItemCount() kita menentukan jumlah yang kita buat private cons val TABS yaitu 3, sedangkan createFragment() bertujuan menentukan fragment yang akan ditampilkan sesuai dengan posisi tab.

Pada main_activity.xml terdapat tabItem di dalam tabLayout namun ini hanya sebagai pembantu sebuah tampilan pada desain, pada dasarnya tanpa tabItem akan berjalan normal.

Pada tabLayout terdapat tabIconTint dengan nilai custom yang kita buat dengan tujuan untuk mengganti warna icon saat tab dipilih dikarenakan secara default warna icon saat di pilih mengikuti warna colorPrimary pada themes.xml dan untuk mengubah posisi judul disamping icon cukup ubah tabInlineLabel menjadi true.

Gimana mudah bukan membuat tab layout dan view pager pada android studio? kalian bisa membaca lebih lanjut tentang Tab Layout Material Design melalui tautan berikut, selanjutnya kita akan mempelajari tentang navigation drawer ikuti terus tutorialnya ya~

Download Source Code