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 :


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android



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.



 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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.


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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

 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
styles.xml




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

 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
activity_main.xml


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


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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).



 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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.



 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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.


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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.


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
New Java Class

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



 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
Create New Class


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


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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 :


 keduanya merupakan komponen user interface  Belajar Menggunakan Material TabLayout dan ViewPager Android
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/
Show comments
Hide comments

0 Response to "Belajar Memakai Material Tablayout Dan Viewpager Android"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close