Membuat Multiple View Type RecyclerView pada Kotlin

Sebelum mulai membuatnya pastikan terlebih dahulu menambahkan dependency berikut pada file build.gradle(app)

implementation ‘com.android.support:recyclerview-v7:27.1.1'

Kemudian, silakan Anda buka file activity_main.xml dan isi dengan source code berikut.

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    tools:context=".MainActivity">

            android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

layout.diatas,cuma tambahkan RecyclerView dengan android:id="@+id/recycler_view"

---

Pembuatan Layout Item RecyclerView

Jadi, untuk membuat multiple view type di RecyclerView jelas membutuhkan 2 file layout item. Jadi, silakan buat satu file layout baru dengan nama layout_item_a.xml dan layout_item_b.xml. Yang pertama, buka file layout_item_a.xml dan isi dengan source code berikut.

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

            android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Ini layout item a" />

Berikutnya buka file layout_item_b.xml dan isi dengan source code berikut.

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

            android:layout_width="match_parent"
        android:layout_height="192dp"
        android:scaleType="centerCrop"
        android:src="@drawable/example_img" />

Pada kedua file layout tersebut dibuat file layout_item_a.xml untuk menampilkan TextView dan file layout_item_b.xml untuk menampilkan gambar.

---

Pembuatan File AdapterRecyclerView

Berikutnya buat file baru dengan nama AdapterRecyclerView.kt dan isi dengan source code berikut.

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import com.ysn.multipleviewtypeexample.R

class AdapterRecyclerView(private val listViewType: List) : RecyclerView.Adapter() {

    companion object {
        val ITEM_A = 1
        val ITEM_B = 2
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        return when (viewType) {
            ITEM_A -> ViewHolderItemA(inflater.inflate(R.layout.layout_item_a, null))
            else -> ViewHolderItemB(inflater.inflate(R.layout.layout_item_b, null))
        }
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val viewType = listViewType[position]
        when (viewType) {
            ITEM_A -> {
                val viewHolderA = holder as ViewHolderItemA
                viewHolderA.textView.text = "Ini layout item a dengan position $position"
            }
            else -> {
                // Lakukan sesuatu jika kamu ingin mengubah gambar pada ViewHolderItemB
            }
        }
    }

    override fun getItemCount(): Int = listViewType.size

    override fun getItemViewType(position: Int): Int = listViewType[position]

    open inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

    inner class ViewHolderItemA(itemView: View) : ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.text_view)
    }

    inner class ViewHolderItemB(itemView: View) : ViewHolder(itemView)

}

Pada file diatas, buat adapter untuk recyclerview dengan meng-override method getItemViewType() yang mana, ini merupakan method yang digunakan, jika ingin membuat multiple view type pada RecyclerView. alurnya adalah mengirim data objek listViewTypelewat constructor dimana, isi dari listViewType ini adalah kategori (ITEM_A atau ITEM_B) dari item yang ingin ditampilkan pada setiap position RecyclerView. Kemudian, pada method onCreateViewHolder() yang telah membuat pengkondisian dimana, jika viewType == ITEM_A maka, tampilkan ViewHolderItemA dan jika tidak maka, tampilkan ViewHolderItemB. “Darimanakah nilai viewType ini?”.Nilai viewType ini berasal dari method override getItemViewType() . Selanjutnya, di method onBindViewHolder() sehingga tinggal melakukan manipulasi untuk tiap-tiap item view holder dimana, pada contoh diatas telah memodifikasi nilai TextView pada ViewHolderItemA agar sesuai dengan nilai dari position-nya.

---

Langkah Terakhir

Buka file MainActivity.kt dan isi dengan source code berikut.

package com.ysn.multipleviewtypeexample

import AdapterRecyclerView
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        val listViewType = mutableListOf(
                AdapterRecyclerView.ITEM_A,
                AdapterRecyclerView.ITEM_B,
                AdapterRecyclerView.ITEM_A,
                AdapterRecyclerView.ITEM_B,
                AdapterRecyclerView.ITEM_B,
                AdapterRecyclerView.ITEM_A,
                AdapterRecyclerView.ITEM_A,
                AdapterRecyclerView.ITEM_B,
                AdapterRecyclerView.ITEM_A
        )
        val adapterRecyclerView = AdapterRecyclerView(listViewType = listViewType)
        recyclerView.adapter = adapterRecyclerView
    }
}

Pada kode diatas, hanya melakukan setup adapter untuk si RecyclerView.

---

Output 

Output Contoh Projek