Membuat tampilan tab dengan TabLayout menggunakan ViewPager di android studio

Halo semuanya, pada postingan ini saya akan membagikan tutorial sederhana untuk kalian yang baru belajar membuat aplikasi android menggunakan android studio.

Pada tutorial kali ini kita akan belajar membuat tampilan tab dengan TabLayout menggunakan ViewPager di android studio.

Daftar Isi sembunyikan

1. Project TabLayout

2. Update colors.xml

3. Membuat file styles.xml

4. Update theme di AndroidManifest.xml

5. Membuat Fragment (Blank)

6. Membuat FragmentPagerAdapter

7. Desain user interface

8. Setup View Pager dan Tab Layout

9. Kode lengkap MainActivity.kt

Project TabLayout

Hal pertama yang harus kita lakukan tentu membuat project baru di android studio. Pada tutorial ini saya memberikan nama projeknya “TabLayout”.

Update colors.xml

Tambahkan beberapa warna seperti berikut.

Membuat file styles.xml

Buat file styles.xml di directory res>values, kemudian ubah kodenya seperti berikut.

Update theme di AndroidManifest.xml

Ubah tema aplikasi di android manifest sesuai style yang telah kita custom.

Membuat Fragment (Blank)

Buat beberapa fragment untuk tampilan setiap tab yang kita buat. Di project ini kita membuat 3 (tiga) fragment, yaitu KotlinFragment, ReactNativeFragment, dan FlutterFragment.

Membuat FragmentPagerAdapter

Siapkan FragmentPagerAdapter untuk mengintegrasikan Fragment, TabLayout, dan ViewPager. Disini kita bisa mengatur title tab dan memberikan action ketika tab di klik atau halaman fragment di geser.