Jalan Ninjaku dalam Menampilkan Data pada Recyclerview

Photo by Javier Allegue Barros on Unsplash

Pada kesempatan kali ini, aku mau share pengalaman serta pemahamanku dalam menampilkan data item pada sebuah recyclerview. Nah untuk menampilkan data tersebut aku biasanya buat class yang meng-extend recyclerview adapter dulu. Ada juga sebuah library yang namanya Groupie, fungsinya kurang lebih sama sih. Dengan library tersebut, kita nggak usah buat class adapter lagi. Next mungkin aku akan bahas.

Overview

Oke, before I show how to make it, we should talk about it. Because we should understand it, before using it.

Apa sih recyclerview itu, terus adapter-adapter tu apa? charge hp?

Recylerview

Okay. Aku nggak akan jelasin panjang lebar cuman akan jelasin intinya aja, karena banyak artikel di luar sana yang udah bahas tentang ini.

Jadi, recyclerview itu adalah sebuah widget yang mana berfungsi untuk menampilkan sebuah data berupa list. Fyi, sebelum lahirnya si Recyclerview ini, ada widget yang bernama Listview fungsinya sama yaitu untuk menampilkan data, cuman Recyclerview merupakan versi yang lebih canggih dan fleksibel daripada si Listview ini.

Adapter

Nah, adapter ini fungsinya tidak lebih, sama seperti fungsi sebuah jembatan, yaitu sebagai penghubung antara data dengan si recyclerviewnya.

Let’s Code

Langsung aja kita ke codenya. Sebelumnya kita harus implementasi dependenciesnya terlebih dahulu ya.

Dependency

Tambahkan code berikut pada dependencies.

def rv_version = "1.1.0"
implementation "androidx.recyclerview:recyclerview:$rv_version"

Setelah implementasi dependencies, kita menyiapkan data dummy nya terlebih dahulu, untuk ditampikan pada recyclerview.

Data Dummy

Berikut data dummy-nya, kalian bisa custom datanya sendiri :)

object Data {

    data class Dummy(val id: String, val name: String)

    val dataDummy = listOf(
        Dummy("1", "Muhamad"),
        Dummy("2", "Riza"),
        Dummy("3", "Abdhi"),
        Dummy("4", "Purnama"),
        Dummy("1", "Muhamad"),
        Dummy("2", "Riza"),
        Dummy("3", "Abdhi"),
        Dummy("4", "Purnama"),
        Dummy("1", "Muhamad"),
        Dummy("2", "Riza"),
        Dummy("3", "Abdhi"),
        Dummy("4", "Purnama"),
        Dummy("1", "Muhamad"),
        Dummy("2", "Riza"),
        Dummy("3", "Abdhi"),
        Dummy("4", "Purnama"),
        Dummy("1", "Muhamad"),
        Dummy("2", "Riza"),
        Dummy("3", "Abdhi"),
        Dummy("4", "Purnama")
    )
}

Setelah itu, kita siapkan beberapa layoutnya.

Layout

Di sini aku siapkan layout pada activity_main.xml dan menambahkan item_list.xml.

Berikut adalah code untuk activity_main.xml :

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</androidx.constraintlayout.widget.ConstraintLayout>

Berikut adalah code untuk item_list.xml :

<!-- item_list.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginVertical="8dp">

    <TextView
        android:id="@+id/tvList"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="1. Abdhi" />
</androidx.constraintlayout.widget.ConstraintLayout>

Kalo sudah di siapkan semua seperti di atas, kita ke step selanjutnya. Yaitu setup adapter.

Adapter

Kali ini kita akan buat sebuah class yang mana akan meng-exted sebuah recyclerview adapter. Berikut codenya, ketik yaaa :)

Class DataAdapter.kt

ViewHolder : dalam context ini, digunakan untuk men-set sebuah view dari dataDummy.
AsyncListDiffer : sebuah pembantu untuk meng-komputasi perbedaan di antara 2 list melalu DiffUtil pada background thread.
onCreateViewHolder : men-set sebuah layout item yang akan digunakan/ditampilkan pada recyclerview nanti.
getItemCount : men-set jumlah dari dataDummy.
onBindViewHolder : untuk mem-bind sebuah data yang akan ditampilkan pada layout item_list nanti.

MainActivity.kt

Setelah selesai mensetup adapternya, kita lanjut ke bagian MainActivity.kt . Di sini kita akan meng-initialize adapter dan memasukkan data dari dataDummy yang sudah kita buat sebelumnya. Berikut codenya :

class MainActivity : AppCompatActivity() {

    private lateinit var adapterData: DataAdapter

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

        adapterData = DataAdapter()
        adapterData.diffUtil.submitList(Data.dataDummy)

        rv_list.adapter = adapterData
    }
}

Sampai di sini kita sudah selesai setup semuanya. Sekarang coba kita jalankan aplikasinya.

Hasil

Taraaa…

Thanks for reading, if there is anything improvement or correction, leave in the comment. :)

Follow me on Medium and Github.

References Link

Membuat Daftar dengan RecyclerView | Developer Android

The Evolution of Adapters in Android