#1 Android Tutorial: Recycler View dengan Multiple View pada Bahasa Pemrograman Kotlin Android
Haii Sobat koding,
Pernah tidak kalian menggunakan aplikasi chating? Terus coba deh perhatikan message yang dikirim dan diterima itu bisa bermacam-macam jenisnya. Bisa berupa text, gambar, video, gif, dan suara. Coba pikirkan di pemrograman android bagaimana hal tersebut bisa dilakukan? padahal itu masih dalam satu list.
Ya tepat sekali jawabannya adalah menggunakan mutiple view pada recycler view. Contoh diatas merupakan salah satu penerapannya. Ohh ya artikel kali ini saya tuliskan karena pernah membaca pertanyaan seseorang member pada suatu group komunitas. Dia bertanya ingin membuat tampilan seperti gambar dibawah ini. Bagaimana caranya?
Beberapa orang telah menjawab bertanyaan ini, orang pertama berfikiran dengan membuat satu recycler dan satu button dijejerkan. Ada juga yang menyarankan menggunakan satu recycler saja tetapi menerapkan multiple view. Saya setuju dengan jawaban orang kedua, dengan menggunakan recycler multiple view mungkin akan lebih efektif.
Kemudian saya mulai mencoba mecari-cari referensi dan menuliskan code untuk menyelesaikan problem diatas. Jadi Stay Tune ya;)
Siapkan cemilan dan minuman yang kalian suka. Tutorial kali ini mungkin akan menjadi panjang. Kita masuk ke topik inti pembahasan.
Langkah Pertama : Tambahkan Dependency untuk recycler view dan card view pada gradle file kalian.
//recycler view
implementation "androidx.recyclerview:recyclerview:1.1.0"
// card view
implementation "androidx.cardview:cardview:1.0.0"Langkah Kedua : Buat item xml masing-masing utuk card promo dan card load more
Langkah 3 : Buat Model untuk Promo dan Load More dengan Menggunakan Data Class pada Kotlin.
Cukup satu baris saja, dengan menggunakan keyword data kita telah membuat setter dan getter otomatis untuk semua parameternya. The Amazing of kotlin !!!
Langkah 4 : Buat Base untuk Recylerview View Holder
Code tersebut digunakan untuk mempermudah membuat Recyler View Holder dengan model yang akan berbeda-beda dan akan menjadi multiple view nantinya.
Langkah 5: Buat adapter Recyler view untuk menampung data yang berbeda.
Kita buat dulu class dengan extends ke RecylerView.Adapter yang akan berisi BaseViewHolder
class DataAdapter(private val context: Context) :
RecyclerView.Adapter<BaseViewHolder<*>>() {}
Tambahkan muttable list kosong dan fungsi untuk menambahkan data kedalam muttable list tersebut.
private val adapterDataList: MutableList<Any> = mutableListOf()private fun addData(item: Any) {
adapterDataList.add(item)
notifyItemChanged(adapterDataList.size - 1)
}
fun addAllData(itemList: List<Any>) {
for (item in itemList)
addData(item)
}
Buat Companion Object untuk membedakan antara type promo dan type load more.
companion object {
private const val TYPE_PROMO = 0
private const val TYPE_LOAD_MORE = 1
}Buat inner class Promo View Holder dan Load More View Holder yang merupakan child/turunan dari BaseViewHolder. Class tersebut berfungsi untuk set data model pada item view kita.
inner class PromoViewHolder(itemView: View) : BaseViewHolder<Promo>(itemView) {
override fun bind(item: Promo) {
itemView.apply {
val resId = resources.getIdentifier(item.imagePromo, "drawable", context.packageName)
imageBanner.setBackgroundResource(resId)
titleBadgePromo.text = item.titleBadge
titlePromo.text = item.title
}
}
}
inner class LoadMoreViewHolder(itemView: View) : BaseViewHolder<LoadMore>(itemView) {
override fun bind(item: LoadMore) {
itemView.titleLoadMore.text = item.title
}
}Setelah itu di bagian class data adapter pasti masih terdapat error, coba lakukan alt+enter kita diminta untuk mengimplement 3 fungsi onCreateViewHolder, getItemCount dan onBindViewHolder. Pilih ketiga fungsi tersebut dan mulai implementasi.
Pada onCreateViewHolder inilah kita akan mengembalikan nilai view holder sesuai dengan type masing-masing. kita juga memasukan view kedalam masing View Holder disini.
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder<*> {
return when (viewType) {
TYPE_PROMO -> {
val view = LayoutInflater.from(context).inflate(R.layout.item_promo, parent, false)
PromoViewHolder(view)
}
TYPE_LOAD_MORE -> {
val view =
LayoutInflater.from(context).inflate(R.layout.item_load_more, parent, false)
LoadMoreViewHolder(view)
}
else -> throw IllegalArgumentException("Invalid view type")
}
}Pada fungsi onBindViewHolder digunakan mapping data kepada tiap-tiap view holder.
override fun onBindViewHolder(holder: BaseViewHolder<*>, position: Int) {
val element = adapterDataList[position]
when (holder) {
is PromoViewHolder -> holder.bind(element as Promo)
is LoadMoreViewHolder -> holder.bind(element as LoadMore)
else -> throw IllegalArgumentException()
}
}Pada fungsi getItemCount digunakan untuk menentukan jumlah item pada Recylerview
override fun getItemCount(): Int {
return adapterDataList.size
}Ini yang terpenting, untuk menentukan jenis / type pada masing-masing data kita perlu ovveride getItemViewType.
override fun getItemViewType(position: Int): Int {
return when (adapterDataList[position]) {
is Promo -> TYPE_PROMO
is LoadMore -> TYPE_LOAD_MORE
else -> throw IllegalArgumentException("Invalid type of data " + position)
}
}Full Codenya akan menjadi seperti tampilan berikut ini.
Langkah 5: Buat tampilan Recylerview pada activity_main.xml
Langkah 6 : Tambahkan adapter, layout manager, data list pada recycler view.
Selesai….
Jalankan dan lihat hasilnya akan tampil seperti gambar dibawah ini.
Panjang juga tutorial pada kali ini, pastikan juga sobat mengikuti step-by-step dari awal. Karena saya sudah mengurutkan langkahnya agar lebih mudah untuk diikuti. Sobat bisa melihat dan mendownload code pada tutorial ini di github link saya.
Sekian tutorial saya pada kali ini jangan lupa tinggalkan jejak anda dan follow medium saya untuk mendapatkan tutorial-tutorial berikutnya. Semoga bermanfaat dan keep healthy :)
Referensi :
