Tutorial Android : Memahami Cara Menciptakan Tabs Dengan View Pager

Bismillaahirrahmaanirrahiim,,

Tutorial Belajar Membuat Aplikasi Android Studio Bahasa Indonesia - Cara Membuat Aplikasi Android - Hai guys, kali ini kita berguru cara menciptakan tabs dengan View Pager dalam aplikasi dengan memakai 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 digunakan untuk menavigasi halaman-halaman. Letak komponen ini biasanya diatas, ialah dibawah toolbar/actionbar.

Dari material.io

- View Pager :

Nah view pager disini berfungsi sebagai layout yang memungkinkan user dapat swipe ke kanan atau kekiri. View Pager inilah nanti yang digabungkan fungsi nya dengan tabs, sehingga memungkinkan user dapat swipe halaman ke kiri atau ke kanan. Contoh sederhana aplikasi yang mengimplementasikan ini menyerupai aplikasi WhatsApp, dimana whatsapp mempunyai 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 isyarat 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 menyerupai berikut :

Pada isyarat diatas kita menciptakan CoordinatorLayout sebagai rootview dan memakai AppBar. Didalam appbar inilah kita dapat masukkan toolbar dan tablayout. Terlihat diatas ada atribut app:tabMode, itu untuk memilih 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 pola 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 menciptakan kelas yang meng-extends FragmentPagerAdapter sebagai adapter dari fragment-fragment kita, yang mana akan di set ke view pager nantinya. Didalam Fragment ini kita menciptakan variabel List Fragment untuk kumpulan fragment dan List TitleFragment untuk title setiap fragment. Dan kita tambahkan 2 method, ialah addFragment() untuk menambah fragment dan judul fragmentnya serta getPagesTitle() untuk mendapat rujukan judul fragmentnya. Buat file dengan nama MainFragmentPagerAdapter.j4va :

Inisialisasi View dan SetUp ViewPager

Buka MainActivity.j4va dan lakukan perubahan berikut :

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

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

Itulah pola cara menciptakan aplikasi android memakai tabLayout dan ViewPager. Apabila ada tambahan, saran, atau pertanyaan, silahkan berdiskusi di komentar. Semoga bermanfaat..

Happy Coding.!

Sumber http://easyandroidindonesia.blogspot.com