Thursday Code : RecyclerView Dengan Data Binding

Hallo semuanyaa..

Selamat datang pada serial Thursday Code. Serial ini rilis tiap hari kamis yang berisikan tentang tutorial atau pengetahuan tentang development Android dari beginner sampai advance. Kali ini Thurday Code akan membahas tentang RecyclerView dengan Data Binding.

Apa itu RecyclerView ?

RecyclerView merupakan library Android untuk menampilkan data dengan jumlah banyak dan bersifat dinamis. RecyclerView merupakan pengembangan dari ListView yang bersifat statis dan RecyclerView bisa kita modifikasi sesuai keinginan dan kebutuhan kita. Kedua hal tersebut membuat RecyclerView lebih superior.

Implementasi

Kali ini kita akan membuat list siswa dengan data yang ditampilkan adalah nama dan kelas. Data memang tidak bersifat dinamis tapi untuk latihan kita menggunakan data statis.

Pertama, tambahkan library Data Binding terlebih dahulu. Jika kalian masih belum mengetahui Data Binding dan penggunaannya, kalian bisa membaca di serial Thursday Code kemarin.

Thursday Code : Data Binding

Tambahkan library RecyclerView pada gradle tingkat module atau tambahkan secara otomatis dengan memilih recyclerview pada palette editor xml.

Setelah itu tambah satu layout untuk menjadi layout per item RecyclerView. Sesuai dengan namanya, layout ini berfungsi untuk mengatur tampilan item di RecyclerView atau bisa dibilang container dari data yang kita tampilkan.

Klik kanan pada layout di folder res. pilih New -> Layout Resource File dan ubah layout menjadi seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <LinearLayout
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_margin="8dp">

        <TextView
            android:id="@+id/tv_nama"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Nama Siswa"
            android:layout_marginBottom="8dp"/>

        <TextView
            android:id="@+id/tv_kelas"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:text="Kelas Siswa" />
    </LinearLayout>
</layout>

Setelah itu kembali ke layout main activity dan ubah menjadi seperti dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">
    <androidx.constraintlayout.widget.ConstraintLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_siswa"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:listitem="@layout/item_siswa"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

tools:listitem digunakan untuk menampilkan per item recyclerview kita dengan layout item yang telah kita buat.

Tambahkan satu file kotlin untuk tipe data siswa.

data class Siswa (
    val nama : String,
    val kelas : String
)

Tambahkan satu file kotlin lagi untuk membuat adapter RecyclerView kita.

class MovieAllAdapter(val context: Context, val clickListener : (Movie) -> Unit) : RecyclerView.Adapter<MovieAllAdapter.MovieViewHolder>() {

    var listData : List<Movie> = mutableListOf()
        set(value) {
            field = value
            notifyDataSetChanged()
        }

    inner class MovieViewHolder(val binding: ItemMovieBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(data : Movie){
            binding.root.setOnClickListener { clickListener(data) }
            binding.tvTitle.text = data.original_title
            binding.tvOverview.text = data.overview
            Glide.with(context)
                .load(Constanta.imagePath+data.poster_path)
                .override(150, 150)
                .into(binding.imgPoster)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) : MovieViewHolder = MovieViewHolder(
        DataBindingUtil.inflate(
            LayoutInflater.from(parent.context), R.layout.item_movie, parent, false)
    )

    override fun getItemCount(): Int = listData.size

    override fun onBindViewHolder(holder: MovieViewHolder, position: Int) {
        holder.bind(listData[position])
    }

}

Extends kelasnya sesuai dengan yang diatas untuk menerapkan adapter RecyclerView. Buatlah variable penampung list data siswa dan tambahkan setter untuk list tersebut.

Class SiswaViewHolder merupakan proses dimana kita menset data kita ke layout yang telah disediakan. onCreateViewHolder merupakan method inisial layout kita yang menggunakan Data Binding.

getItemCount merupakan inisial jumlah item yang ditampilkan ke RecyclerView dan onBindViewHolder merupakan proses pengambilan data pada list data kita.

Dan perlu diingat! Ini merupakan class adapter yang sering saya gunakan jadi kalian bisa memodifikasi sesuai keinginan kalian.

Terakhir kita tinggal menghubungkan class adapter kita dengan RecyclerView pada Main Activity kita.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val listSiswa = mutableListOf<Siswa>()

        listSiswa.add(Siswa("Ade Resie Muchorobbi Setiawan","MIA 5"))
        listSiswa.add(Siswa("Teguh Arik Ardiansyah","MIA 5"))
        listSiswa.add(Siswa("Linda Sri Rahayu","MIA 5"))
        listSiswa.add(Siswa("Nanang Wahyudi","IIS 1"))
        listSiswa.add(Siswa("Lukman Hari Prasetyo","IIS 1"))
        listSiswa.add(Siswa("Prasetyo Nugroho","IIS 4"))

        binding.rvSiswa.apply {
            this.adapter = MyAdapter().apply {
                this.listData = listSiswa
            }
            this.layoutManager = LinearLayoutManager(this@MainActivity)
        }
    }
}

Setelah itu coba jalankan project kalian. Jika terjadi error maka cek ulang apakah tag layout fragment sudah ada atau belum atau kesalahan penulisan code pada kelas adapter maupun main activity.

Untuk project artikel ini bisa kalian lihat pada link github dibawah ini.

resie001/RecyclerViewExample

Sekian dari Thurday Code kali ini dengan tema RecyclerView pada Android. Pantengin terus hari kamis pada Medium kami Chevalier Lab atau media sosial kami untuk update selanjutnya. Dan jangan lupa kritik dan saran buat Thurday Code agar semakin baik lagi. Sekian dari saya, Terima kasih.

Have a Nice Day!!!