Membuat List dengan RecyclerView di Android Kotlin

RecyclerView adalah ViewGroup yang dapat menampilkan data jumlah banyak dalam bentuk list. Dengan RecyclerView kita dapat membuat list data jadi cepat dan efisien karena hanya data yang terlihat di layar saja yang di-load, sisanya akan di-recycle. Contohnya jika kita mempunyai 100 data yang ingin kita tampilan dalam bentuk list, maka hanya bagian kecil atau yang terlihat di layar saja yang di-load oleh RecycleView. Berikut gambaran cara kerja RecyclerView.

Sekarang kita akan membuat aplikasi MyBookList, dalam aplikasi ini akan menampilkan list nama buku dan penulisnya. Aplikasi ini juga dapat menambahkan buku baru ke dalam list. Berikut screenshot dari aplikasi yang akan kita buat.

Buka Android Studio dan buat project baru → pilih Empty Activity dan masukkan konfigurasi seperti berikut :

• Name : MyBookList
• Package Name : com.teknorial.mybooklist
• Language : Kotlin
• Minimum SDK : API 21: Android 5.0 (Lollipop)

Kemudian klik Finish.

Setelah project berhasil di-build. Kita akan membuat tampilan item list yang akan digunakan di dalam list. Buka folder res/layout, klik kanan pada folder layout → new → Layout Resource File → Masukkan file name "item_list" → Klik OK.

Kemudian masukkan kode berikut di dalam 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:padding="8dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="title"
        android:textColor="@color/black"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Sebuah Seni untuk Bersikap Bodo Amat" />

    <TextView
        android:id="@+id/tvAuthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Author"
        android:textSize="14sp"
        app:layout_constraintStart_toStartOf="@+id/tvTitle"
        app:layout_constraintTop_toBottomOf="@+id/tvTitle"
        tools:text="Mark Manson" />

</androidx.constraintlayout.widget.ConstraintLayout>

Kita telah membuat tampilan item untuk ditampilkan ke dalam list. Sekarang kita akan menambahkan RecyclerView ke dalam layout activity_main.xml. Buka activity_main.xml dan modifikasi seperti kode di bawah.

<?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/recyclerview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/etTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:hint="Masukkan Judul Buku"
        android:inputType="textMultiLine"
        app:layout_constraintBottom_toTopOf="@+id/etAuthor"
        app:layout_constraintEnd_toStartOf="@+id/btnAdd"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add"
        app:layout_constraintBottom_toBottomOf="@+id/etTitle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etTitle" />

    <EditText
        android:id="@+id/etAuthor"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:hint="Masukkan Nama Penulis"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/etTitle"
        app:layout_constraintStart_toStartOf="@+id/etTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>

Dari gambar di atas, kita telah menambahkan RecyclerView yang akan kita gunakan nanti untuk menampilkan list. Sedangkan dua EditText dan Button digunakan untuk menginput buku baru dan nantinya akan ditampilkan ke dalam RecyclerView.

Sekarang kita akan membuat sebuah data class yang digunakan sebagai informasi struktur data untuk setiap item dari RecyclerView. Klik kanan pada folder mybooklist → New → Kotlin Class/File → Masukkan nama "Book" dan Pilih Data Class.

Buka class Book yang telah kita buat dan modifikasi kode seperti berikut.

package com.teknorial.mybooklist

data class Book(
    val title: String,
    val author: String
)

Selanjutnya kita membutuhkan Adapter dan ViewHolder untuk RecyclerView. Adapter digunakan untuk menghubungkan data ke RecyclerView. ViewHolder adalah class yang menyimpan referensi layout dari item. Penjelasan setiap implementasi function dari Adapter akan di jelaskan dalam kode. Buat kotlin class baru yang bernama BookAdapter dan tambahkan kode di bawah.

package com.teknorial.mybooklist

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class BookAdapter(private val books: List) :
    RecyclerView.Adapter() {

    //ViewHolder adalah class yang menyimpan referensi layout item_list
    class BookViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val tvTitle: TextView = view.findViewById(R.id.tvTitle)
        val tvAuthor: TextView = view.findViewById(R.id.tvAuthor)
    }

    //Membuat layout item_list sebagai item untuk RecyclerView
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BookViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_list, parent, false)

        return BookViewHolder(view)
    }

    //Pengaturan data pada item setiap list dari RecyclerView
    override fun onBindViewHolder(holder: BookViewHolder, position: Int) {
        holder.tvTitle.text = books[position].title
        holder.tvAuthor.text = books[position].author

    }

    //Mengembalikan nilai panjang dari data
    override fun getItemCount(): Int {
        return books.size
    }

}

Langkah terakhir adalah kita akan menambah data ke dalam adapter dan menampilkan ke RecyclerView. Buka MainAcitivity  dan modifikasi seperti kode berikut.

package com.teknorial.mybooklist

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

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

        val rvBooks = findViewById<RecyclerView>(R.id.recyclerview)
        val etTitle = findViewById<EditText>(R.id.etTitle)
        val etAuthor = findViewById<EditText>(R.id.etAuthor)
        val btnAdd = findViewById<Button>(R.id.btnAdd)

        //data buku awal dengan menggunakan MutableList
        val bookList = mutableListOf(
            Book("Sebuah Seni untuk Bersikap Bodo Amat", "Mark Manson"),
            Book("Atomic Habits: Perubahan Kecil yang Memberikan Hasil Luar Biasa", "James Clear"),
            Book("Grit: Kekuatan Passion dan Kegigihan", "Angela Duckworth"),
            Book("Mindset", "Carol S. Dweck, Ph.d."),
        )

        //memasukkan data ke dalam adapter dan menampilkah ke dalam RecyclerView
        val adapter = BookAdapter(bookList)
        rvBooks.adapter = adapter
        rvBooks.layoutManager = LinearLayoutManager(this)

        //event click pada button add
        btnAdd.setOnClickListener {
            //mengambil value dari kedua EditText
            val title = etTitle.text.toString()
            val author = etAuthor.text.toString()

            val book = Book(title, author)

            //menambahkan data baru ke dalam list
            bookList.add(book)
            //memberi tahu adapter bahwa item baru telah ditambahkan
            adapter.notifyItemInserted(bookList.size - 1)
        }

    }
}

Pada kode di atas kita juga membuat empat data buku awal dan event click pada button untuk menambah data buku. Sekarang coba jalan aplikasi, jika tidak ada error maka aplikasi akan berjalan seperti video di bawah.

Dari video di atas kita dapat melihat bahwa kita telah membuat 4 data buku awal dan dapat menambahkan data baru ke dalam list. Demikian tutorial Membuat List dengan RecyclerView di Android Kotlin. Jika kamu masih kesulitan dalam mengikuti tutorial ini, silahkan bertanya di kolom komentar di bawah. Semoga artikel ini bermanfaat. Terima kasih.

Source Code : https://github.com/rflash95/tutorial-recyclerview

Tag

• Android