Wednesday, 4 January 2017

Tutorial Android Expandable RecyclerView

Hari ini saya akan membagikan sebuah tutorial bagus menggunakan recyclerview. Biasanya, kalian pasti menggunakan ListView untuk membuat tampilan collapse dan expand (Tampilan Expandable), ya kan? (Setidaknya untuk pemula pasti menggunkan listview :D)

Menggunakan ListView bukan tanpa alasan karena di Listview punya view yang bernama ExpandableListView, jadi dengan menggunakan view tersebut kita tinggal set-set data saja.

Baca juga : Tutorial Swipe atau Geser Layar Kebawah Untuk Refresh Data Pada Android Menggunakan SwipeRefreshLayout

Tapi dalam beberapa kasus, aplikasi kalian mengharuskan menggunakan recyclerview, namun dalam waktu yang sama Recyclerview tidak punya ExpandableRecyclerView, apa yang kalian lakukan?

Memang, membuat sebuah tampilan expandable menggunakan recyclerview agak susah jika dibandingkan dengan ExpandableListView. Kalian harus membuat semua class yang dibutuhkan agar bisa terjadi expand dan collapse, tidak hanya sekedar set-set data.

Tapi jangan khawatir, putuguna[dot]com telah menghabiskan waktu beberapa jam untuk membuat contoh aplikasi expandable menggunakan recyclerview, semoga kalian mudah mengerti proses dan langkah-langkahnya.

Tujuan Akhir

Hasil Akhir

Persiapan


Compile beberapa librari berikut ini :

compile 'com.android.support:design:23.2.0'
compile 'com.android.support:cardview-v7:23.2.0'
compile 'com.android.support:recyclerview-v7:23.2.0'

Setelah itu, download LIB MODULE EXPANDABLE , extract dan tempatkan di package utama di project kalian. Bingung? Coba lihat Gambar 1 dibawah ini :

Gambar 1
Tempatkan LIB MODULE EXPANDABLE persis seperti yang terlihat pada Gambar 1.

Implementasi


Buat 3 layout menggunakan XML :
  1. activity_main.xml
  2. item_list_parent.xml
  3. item_list_child.xml
Seperti yang terlihat pada Gambar 1, Disana ada beberapa package, didalam package tersebut ada beberapa class.

Package models
  1. BiodataChildModel.java
  2. BiodataParentModel.java
Package expandables
  1. BiodataChildViewHolder.java
  2. BiodataParentViewHolder.java
  3. BiodataExpandable.java
And terakhir, pastinya MainActivity.java.


Pertama, Modifikasi koding pada layout-layout yang sudah dibuat barusan.

activity_main.xml. Ketikan kode dibawah ini:

item_list_child.xml. Ketikan kode dibawah ini :

item_list_parent.xml. Ketikan kode dibawah ini :

Kedua,  kita buat kodingan untuk semua class java di semua package models. Kenapa package models di dahulukan? Karena class-class yang ada didalamnya akan digunakan pada class-class pada package lainnya.

1. Package MODELS

Buka class BiodataChildModel.java. Class ini akan menyimpan semua data yang akan ditampilkan di tampilan expand:

Kemudian buka class BiodataParentModel.java. Class ini mengandung data yang berasan dari class BiodataChildModel dan diset sebagai list.

Karena class ini sebagai class parent, kamu harus meng extends ParentListItem. Setelah mengextends, kamu harus mengimplementasikan method-methodnya. Coba lihat kodingan dibawah ini :

Perhatian :
Pastikan kalian sudah me-return mListChild di method getChildItemList()

2. Package EXPANDABLES

Buka class BiodataChildViewHolder.java. Ketikan kode dibawah ini :

Buka class BiodataParentViewHolder.java. Ketikan kode dibawah ini :

Pada kodingan diatas terdapat beberapa kode, antara lain :
  1. setExpanded(boolean expanded) 
  2. onExpansionToggled(boolean expanded) . 
Method-method tersebut digunakan untuk membuat sebuah animasi pada imageview (icon + dan -) ketika terjadi tampilan expand atau collapse.

Buka class BiodataExpandable.java. Ketikan kode dibawah ini :

Semua kodingan pada class-classs yang digunakan untuk membuat tampilan expandable sudah selesai. Saatnya melakukan input data dan set adapter di MainActivity.java. Ketikan kode dibawah ini :

Selesai!!! Jalankan project kalian, Semoga berjalan dengan baik dan tidak ada error apapun :D. Matur Suksma.

Please post a polite comment and do not post a spam
EmoticonEmoticon