Belajar Memakai Material Tablayout Dan Viewpager Android

TabLayout dan ViewPager , keduanya merupakan komponen user interface ,yang dipakai untuk keperluan navigasi user atau pengguna , pada Aplikasi Android. Jika TabLayout , dipakai untuk navigasi tab ,dan untuk kategori judul atau icon navigasi dari tiap-tiap tabnya. ViewPager dipakai untuk membungkus (wrapping) konten ,yang akan ditampilkan,  dan juga semoga user atau pengguna sanggup menswipe dari kiri atau kanan. Beberapa pola Aplikasi Populer yang memakai fitur ini , menyerupai WhatsApp, Twitter , Play Store , dan masih banyak lagi.  Dengan santunan Android Design Support Library dan juga balutan Material Design, kita sanggup menggunakanya pada project Aplikasi Android yang sedang kita kembangkan. Pada tutorial mencar ilmu android kali ini ,kita akan coba menciptakan pola penggunaan dari TabLayout dan ViewPager ,dengan memakai Android Studio. Berikut mari kita simak lebih lanjut :

1. Pertama-tama buka project Android Studio yang sudah ada ,atau menciptakan project gres ,dengan memilih Start New Android Studio Project, kemudian menentukan 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 bab dependencies.


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


//26.1.0 tergantung versi SDK library terbaru,  jadi sanggup 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 pola code xmlnya :


Karena kita akan memakai custom theme disini , maka kita design  terlebih dahulu , dengan memakai 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 menciptakan 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 bab kiri. Pilih New , kemudian pilih Fragment > Pilih Fragment(Blank).

New Fragment Blank

5. Pada bab Configure Component , kita atur nama code logic  pada kolom Fragment Name ,  kemudian 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 menciptakan 3 Fragment  , pola struktur file layout.xmlnya ,   akan terlihat menyerupai ini. Kalian sanggup mengisi  komponen View menyerupai , TextView , Button dan komponen View lainya, pada setiap layout fragment ,yang telah dibuat.

layout.xml

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

Agar kita sanggup 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 gres , kalian sanggup klik kanan pada folder package, kemudian pilih New > Java Class.

New Java Class

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

Create New Class

8. Pada class TabPageAdapter ,kalian sanggup memakai pola code berikut :

FragmentPagerAdapter

Penjelasan :


Kita menciptakan file class gres berjulukan , TabPageAdapter  yang mewarisi (extends) class library FragmentPagerAdapter.


Pada baris code pertama , kita menciptakan 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 memakai 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 pola code berikut :

MainActivity.java

Penjelasan :

Karena kita memakai custom theme , dan memakai 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 , kemudian kita set nilanya dengan memakai obyek mViewPager dengan method .setAdapter

Selanjutnya ,kita tambahkan objek dari TabLayout berserta rujukan idnya.

Kita set nilainya  dengan memakai 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 menyerupai video berikut ini :

Sumber https://www.okedroid.com/

Share this post