Tutorial Android : Memahami Cara Membuat Tabs Dengan View Pager

Bismillaahirrahmaanirrahiim,,

Tutorial Belajar Membuat Aplikasi Android Studio Bahasa Indonesia - Cara Membuat Aplikasi Android  - Hai guys, kali ini kita belajar cara membuat tabs dengan View Pager dalam aplikasi dengan menggunakan Android Support Library dan Fragment sebagai container halamannya.

Material Tabs dari materialdoc.com

Hasil Akhir Tutorial

Konsep :

Sebelum kita mulai meng-koding, kita pahami sebentar apa itu Tabs dan apa itu ViewPager

- Tabs :

Tabs merupakan salah satu komponen dari material design yang dipakai untuk menavigasi halaman-halaman. Letak komponen ini biasanya diatas, yaitu dibawah toolbar/actionbar.

Dari material.io

- View Pager :

Nah view pager disini berfungsi sebagai layout yang memungkinkan user bisa swipe ke kanan atau kekiri. View Pager inilah nanti yang digabungkan fungsi nya dengan tabs, sehingga memungkinkan user bisa swipe halaman ke kiri atau ke kanan. Contoh sederhana aplikasi yang mengimplementasikan ini seperti aplikasi WhatsApp, dimana whatsapp memiliki 3 tabs.

Praktik 

Tambah dependencies

Kita tambahkan dependencies, sesuaikan xxx dengan compileSdkVersion project nya.

dependencies {
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'
    compile 'com.android.support:support-v13:X.X.X'
    // sesuaikan X.X.X version
}

Tambah Resource Value

Dibagian file colors.xml tambahkan baris kode berikut untuk warna aplikasi dan atribut tab layout :
Juga kita tambahkan di dimens.xml :

Dan ini untuk strings.xml :

Untuk styles.xml, disini kita buat style/custom untuk TabLayout :

Perhatikan diatas, kita mendefinisikan NoActionBar, untuk menggantikan Default Action Bar dengan Toolbar. Atribut tabIndicatorColor berfungsi untuk mendefinisikan color indicator dalam tablayout (warna defaultnya pink) dan tinggi indicator nya kita set 3dp.

Layout Activity dan Fragment

Kita ubah layout activity_main.xml seperti berikut :

Pada kode diatas kita membuat CoordinatorLayout sebagai rootview dan menggunakan AppBar. Didalam appbar inilah kita bisa masukkan toolbar dan tablayout. Terlihat diatas ada atribut app:tabMode, itu untuk menentukan mode tab yang ingin digunakan, bernilai fixed artinya bahwa sejumlah n tab akan menyesuaikan lebar layarnya.

Kemudian kita buat layout fragment, yakni untuk menampung halaman/container dari masing-masing navigasi tab. Dalam contoh ini kita buat 3 tab : Call, Chat, Contact. Maka buat masing-masing layout dengan mengganti atribut text :

Buat Class Fragment

Buat class fragment, masing-masing : CallFragment, ChatFragment, ContactFragment.

Ubah R.layout.nama_fragment_layout dengan nama fragment yang sesuai.

Membuat FragmentPagerAdapter

Setelah itu kita perlu membuat kelas yang meng-extends FragmentPagerAdapter sebagai adapter dari fragment-fragment kita, yang mana akan di set ke view pager nantinya. Didalam Fragment ini kita membuat variabel List Fragment untuk kumpulan fragment dan List TitleFragment untuk title setiap fragment. Dan kita tambahkan 2 method, yaitu addFragment() untuk menambah fragment dan judul fragmentnya serta getPagesTitle() untuk mendapatkan referensi judul fragmentnya. Buat file dengan nama MainFragmentPagerAdapter.java :

Inisialisasi View dan SetUp ViewPager

Buka MainActivity.java dan lakukan perubahan berikut :

Penjelasan : Dalam method onCreate() kita memasukkan method initViews(). Ini untuk menginisialisasi view-view kita. Ada beberapa method penting seperti :

1. tabLayout.setupWithViewPager() : untuk mempassing viewpager ke tabLayout.
2. setupViewPager() : Method untuk mengkonfigurasi/menambah fragment beserta title nya ke dalam MainFragmentPagerAdapter, kemudian di passing ke viewPager.setAdapter().

Itulah contoh cara membuat aplikasi android menggunakan tabLayout dan ViewPager. Apabila ada tambahan, saran, atau pertanyaan, silahkan berdiskusi di komentar. Semoga bermanfaat..

Happy Coding.!