Belajar Menggunakan Material TabLayout dan ViewPager Android

TabLayout dan ViewPager , keduanya merupakan komponen user interface ,yang digunakan untuk keperluan navigasi user atau pengguna , pada Aplikasi Android. Jika TabLayout , digunakan untuk navigasi tab ,dan untuk kategori judul atau icon navigasi dari tiap-tiap tabnya. ViewPager digunakan untuk membungkus (wrapping) konten ,yang akan ditampilkan,  dan juga agar user atau pengguna bisa menswipe dari kiri atau kanan. Beberapa contoh Aplikasi Populer yang menggunakan fitur ini , seperti WhatsApp, Twitter , Play Store , dan masih banyak lagi.  Dengan dukungan Android Design Support Library dan juga balutan Material Design, kita dapat menggunakanya pada project Aplikasi Android yang sedang kita kembangkan. Pada tutorial belajar android kali ini ,kita akan coba membuat contoh penggunaan dari TabLayout dan ViewPager ,dengan menggunakan Android Studio. Berikut mari kita simak lebih lanjut :

1. Pertama-tama buka project Android Studio yang sudah ada ,atau membuat project baru ,dengan memilih Start New Android Studio Project, lalu memilih Empty Activity sebagai langkah awal.

Start a new Android Studio Project

2.  Pada build.gradle (Module:app) kita setting terlebih dahulu ,dengan menambah library  pada bagian dependencies.


Tambahkan 'com.android.support:design:26.1.0'  , jika sudah pilih Sync Now untuk sinkronisasi gradle.


//26.1.0 tergantung versi SDK library terbaru,  jadi bisa berubah-rubah tergantung perkembangan.

build.gradle(Module:app)

//klik gambar untuk zoom

3.  Seperti langkah-langkah tutorial android sebelumnya.  Kita awali dengan mendesign layout XML terlebih dahulu. Berikut contoh code xmlnya :


Karena kita akan menggunakan custom theme disini , maka kita design  terlebih dahulu , dengan menggunakan style berikut , pada  res > values > styles.xml

styles.xml

Pada file activity_main.xml kita gunakan  parent layout AppBar ,yang didalamnya terdapat komponen View seperti  Toolbar dan TabLayout.

activity_main.xml

Di dalam file activity_main.xml , tersemat file konten_aplikasi.xml, yang di dalamnya kita gunakan ViewPager.

konten_aplikasi.xml

4. Setelah kita membuat dan mendesign layout utama  , selanjutnya kita buat Fragment , yang dimana nantinya  Fragment ini akan terbungkus oleh ViewPager.   Di dalam tiap-tiap layout fragment.

Pertama klik kanan pada struktur folder Project ,pada bagian kiri. Pilih New , lalu pilih Fragment > Pilih Fragment(Blank).

New Fragment Blank

5. Pada bagian Configure Component , kita atur nama code logic  pada kolom Fragment Name ,  lalu nama layout ui xml , pada Fragment Layout Name. Kalian unceklist , pada bagian Include fragment factory methods? dan Include interface callback ?. Jika sudah pilih tombol Finish.

Configure Component

6. Disini kita membuat 3 Fragment  , contoh struktur file layout.xmlnya ,   akan terlihat seperti ini. Kalian bisa mengisi  komponen View seperti , TextView , Button dan komponen View lainya, pada setiap layout fragment ,yang telah dibuat.

layout.xml

7. Setelah kita bergelut pada design layout , sekarang kita beralih ke code logic  baris code java.

Agar kita dapat menswipe dengan Tab Layout , kita harus  menambahkan View Pager ,yang berisi beberapa Fragment  ke Tab Layout. Dengan  mengaturnya  pada class  yang mewarisi Fragment Adapter.

Untuk file class java baru , kalian bisa klik kanan pada folder package, lalu pilih New > Java Class.

New Java Class

Selanjutnya ,pada bagian jendela Create New Class , kalian bisa mengisi nama Adapternya ,pada kolom Name. Jika sudah pilih tombol OK.

Create New Class

8. Pada class TabPageAdapter ,kalian bisa menggunakan contoh code berikut :

FragmentPagerAdapter

Penjelasan :


Kita membuat file class baru bernama , TabPageAdapter  yang mewarisi (extends) class library FragmentPagerAdapter.


Pada baris code pertama , kita membuat variable PAGE_COUNT = 3. Untuk jumlah halaman atau fragment yang telah kita buat.

Lalu kita buat variable judulTab Array , untuk mengisi nilai title atau judul pada tiap tab layout.


Kita menggunakan constructor TabPagerAdapter , untuk pemanggilan objek  pada file MainActivity.java


Method override getItem , untuk mengatur posisi yang akan mengembalikan nilai pada setiap Fragment.


Method override getCount , untuk mengambil nilai jumlah dari variable PAGE_COUNT.

Method  override getPageTitle , untuk mengambil nilai title ,pada variable judulTab.



7. Terakhir ,pada MainActivity.java , kita gunakan contoh code berikut :

MainActivity.java

Penjelasan :

Karena kita menggunakan custom theme , dan menggunakan komponen View Toolbar. Kita referensikan id ,dengan findViewById  yang terdapat pada file activity_main.xml , pada objek mToolbar.

Lalu jangan lupa kita set nilanya  setSupportActionBar(mToolbar);

Kita buat objek mViewPager , dengan mereferensikan idnya.

Nah ,disini kita buat obyek new  mAdapter dari class TabPagerAdapter , lalu kita set nilanya dengan menggunakan obyek mViewPager dengan method .setAdapter

Selanjutnya ,kita tambahkan objek dari TabLayout berserta referensi idnya.

Kita set nilainya  dengan menggunakan method setupWithViewPager ,  pada objek mTabLayout ,yang berisi objek mViewPager

8. Setelah selesai semua , mari kita coba jalankan Aplikasinya di Android Studio. Hasil tampilan Aplikasinya kurang lebih akan terlihat seperti video berikut ini :

Location:

Share :