Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

byFerdian Rahabista -
0


Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

Halo lagi, calon developer aplikasi wisata!

Di artikel sebelumnya kita sudah bisa membuat UI interaktif dengan tombol dan input. Tapi aplikasi wisata pasti butuh menampilkan daftar, misalnya daftar kategori wisata atau daftar tempat wisata. Nah, komponen ajaib untuk menampilkan daftar yang bisa digulir (scrolling) adalah RecyclerView. Dia seperti kereta api yang bisa memuat banyak gerbong (item) dan bisa jalan terus tanpa habis.

🤣 Kenapa RecyclerView disebut Recycler? Karena dia mendaur ulang item yang tidak terlihat, mirip tukang loak yang memanfaatkan barang bekas! 😆

Apa itu RecyclerView?

RecyclerView adalah komponen di Android yang dirancang khusus untuk menampilkan kumpulan data dalam jumlah besar secara efisien. Dia hanya membuat cukup item untuk mengisi layar, lalu mendaur ulang item yang sudah digulir keluar layar untuk digunakan lagi. Irit memori, irit tenaga.

Untuk menggunakan RecyclerView, kita butuh 3 komponen utama:

  • Data: kumpulan data yang mau ditampilkan (misal daftar kategori).
  • Adapter: jembatan antara data dan RecyclerView. Dia yang mengatur bagaimana setiap item dibuat dan diisi data.
  • ViewHolder: bagian dari adapter yang memegang referensi ke komponen UI dalam satu item (misal TextView).

🔧 Langkah 0: Pastikan Dependency RecyclerView

Di project baru, RecyclerView biasanya sudah termasuk. Tapi untuk memastikan, buka file build.gradle (Module: app) dan cek apakah ada baris ini di dalam dependencies:

implementation 'androidx.recyclerview:recyclerview:1.3.2'

Kalau tidak ada, tambahkan sendiri lalu klik Sync Now. Versi bisa disesuaikan dengan yang terbaru.

Langkah 1: Buat Data Class KategoriWisata

Kita akan pakai data class yang sama seperti di artikel Kotlin dasar. Buat file Kotlin baru: klik kanan pada package com.example.wisataapp → New → Kotlin Class/File, pilih Data Class, beri nama KategoriWisata.

Isi dengan:

package com.example.wisataapp

data class KategoriWisata(
    val id: Int,
    val nama: String,
    val deskripsi: String?
)

Simpan.

Langkah 2: Buat Layout untuk Satu Item (item_kategori.xml)

Kita perlu mendesain tampilan untuk satu baris kategori. Buat file layout baru: klik kanan folder res/layout → New → Layout Resource File. Beri nama item_kategori, root element pilih LinearLayout (atau ConstraintLayout, tapi Linear lebih sederhana).

Isi dengan kode berikut (mode Code/XML):

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

    <TextView
        android:id="@+id/textNama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/textDeskripsi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="14sp"
        android:textColor="@android:color/darker_gray" />

</LinearLayout>

Penjelasan: LinearLayout vertikal, berisi dua TextView: satu untuk nama (tebal, besar), satu untuk deskripsi (abu-abu, kecil).

Langkah 3: Buat Adapter (KategoriAdapter.kt)

Adapter adalah otak yang menghubungkan data dengan RecyclerView. Buat class Kotin baru dengan nama KategoriAdapter (bukan data class, pilih Class).

Kita akan buat adapter yang menerima list kategori, dan punya inner class ViewHolder. Berikut kode lengkapnya:

package com.example.wisataapp

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

class KategoriAdapter(private val listKategori: List<KategoriWisata>) :
    RecyclerView.Adapter<KategoriAdapter.KategoriViewHolder>() {

    // ViewHolder: menyimpan referensi ke komponen di item layout
    class KategoriViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvNama: TextView = itemView.findViewById(R.id.textNama)
        val tvDeskripsi: TextView = itemView.findViewById(R.id.textDeskripsi)
    }

    // Membuat ViewHolder baru (saat RecyclerView butuh item baru)
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): KategoriViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_kategori, parent, false)
        return KategoriViewHolder(view)
    }

    // Mengisi data ke ViewHolder pada posisi tertentu
    override fun onBindViewHolder(holder: KategoriViewHolder, position: Int) {
        val kategori = listKategori[position]
        holder.tvNama.text = kategori.nama
        holder.tvDeskripsi.text = kategori.deskripsi ?: "Tidak ada deskripsi"
    }

    // Memberi tahu RecyclerView berapa banyak item
    override fun getItemCount(): Int = listKategori.size
}

Penjelasan:

  • Adapter menggunakan RecyclerView.Adapter dengan tipe parameter ViewHolder kita.
  • onCreateViewHolder: dipanggil saat RecyclerView membutuhkan ViewHolder baru. Kita inflate layout item_kategori.xml.
  • onBindViewHolder: dipanggil untuk mengisi data ke ViewHolder di posisi tertentu.
  • getItemCount: jumlah data.

Langkah 4: Tambahkan RecyclerView di activity_main.xml

Buka activity_main.xml. Hapus semua komponen sebelumnya (EditText, Button, TextView) karena kita akan ganti dengan RecyclerView. Tapi kalau ingin tetap ada, bisa taruh di atas RecyclerView, tapi untuk latihan kita fokus ke daftar dulu.

Ganti isi activity_main.xml menjadi:

<?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/recyclerViewKategori"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Perhatikan: kita menambahkan app:layoutManager untuk menentukan bagaimana item disusun (LinearLayoutManager berarti vertikal). Bisa juga diatur secara programatis.

Langkah 5: Setup RecyclerView di MainActivity.kt

Buka MainActivity.kt. Kita akan membuat data dummy, lalu pasang adapter ke RecyclerView.

Kode lengkap:

package com.example.wisataapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
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)

        // Siapkan data dummy (nanti dari API)
        val listKategori = listOf(
            KategoriWisata(1, "Pantai", "Wisata tepi laut dengan pasir putih"),
            KategoriWisata(2, "Gunung", "Pendakian dan pemandangan alam"),
            KategoriWisata(3, "Museum", "Tempat belajar sejarah dan budaya"),
            KategoriWisata(4, "Taman Hiburan", "Wahana seru untuk keluarga"),
            KategoriWisata(5, "Danau", "Pemandangan air yang tenang"),
            KategoriWisata(6, "Air Terjun", "Keindahan alam yang menyegarkan")
        )

        // Ambil RecyclerView dari layout
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerViewKategori)

        // Set LayoutManager (vertikal)
        recyclerView.layoutManager = LinearLayoutManager(this)

        // Set Adapter
        val adapter = KategoriAdapter(listKategori)
        recyclerView.adapter = adapter
    }
}

Penjelasan:

  • Kita membuat list data dummy menggunakan listOf.
  • findViewById untuk mendapatkan RecyclerView.
  • layoutManager menentukan susunan item (LinearLayoutManager vertikal).
  • adapter dipasang dengan instance adapter yang menerima data.

Langkah 6: Jalankan Aplikasi

Klik Run (segitiga hijau). Pilih emulator. Maka akan muncul daftar kategori wisata yang bisa digulir ke atas-bawah. Setiap item menampilkan nama dan deskripsi.

Selamat! 🎉 Kamu baru saja membuat RecyclerView pertama. Coba gulirkan, pasti terasa mulus.

💡 Kalau daftar tidak muncul atau error, pastikan tidak lupa memanggil setAdapter. Juga periksa apakah id di item_kategori.xml sudah sesuai dengan yang dipanggil di ViewHolder.

Bonus: Menangani Klik pada Item

Tentu kita ingin saat item diklik, misalnya membuka detail kategori. Caranya dengan menambahkan listener di dalam adapter. Kita bisa menambahkan lambda parameter di adapter.

Ubah KategoriAdapter menjadi:

class KategoriAdapter(
    private val listKategori: List<KategoriWisata>,
    private val onItemClick: (KategoriWisata) -> Unit
) : RecyclerView.Adapter<KategoriAdapter.KategoriViewHolder>() {

    // ... (onCreateViewHolder sama)

    override fun onBindViewHolder(holder: KategoriViewHolder, position: Int) {
        val kategori = listKategori[position]
        holder.tvNama.text = kategori.nama
        holder.tvDeskripsi.text = kategori.deskripsi ?: "Tidak ada deskripsi"

        // Set klik listener di itemView
        holder.itemView.setOnClickListener {
            onItemClick(kategori)
        }
    }

    // ... (getItemCount)
}

Di MainActivity, saat membuat adapter:

val adapter = KategoriAdapter(listKategori) { kategori ->
    // Aksi saat item diklik
    // Misal tampilkan Toast
    Toast.makeText(this, "Kamu memilih: ${kategori.nama}", Toast.LENGTH_SHORT).show()
}

Jangan lupa import android.widget.Toast. Coba jalankan dan klik item, akan muncul pesan singkat.

Rangkuman

  • RecyclerView: komponen untuk menampilkan daftar scrollable.
  • Adapter: menghubungkan data dan RecyclerView, bertugas membuat dan mengisi ViewHolder.
  • ViewHolder: menyimpan referensi komponen UI per item.
  • LayoutManager: mengatur tata letak item (LinearLayoutManager, GridLayoutManager, dll).

Selanjutnya?

Di artikel berikutnya (Android Kotlin #6: Menghubungkan Aplikasi ke API dengan Retrofit), kita akan mengganti data dummy dengan data asli dari API Wisata yang sudah kita buat. Kita akan menggunakan library Retrofit untuk mengambil data kategori dari server. Sampai jumpa!

😎 Kalau RecyclerView-mu error, jangan panik. Cek lagi adapter, layoutManager, dan pastikan data tidak kosong. Ingat, RecyclerView itu teman baik yang selalu mau diajak kerja sama.

Ditulis oleh Kakak programmer yang dulu juga bingung bedain adapter dan viewHolder. Kalau ada pertanyaan, tulis di komentar ya!

📘 Blog ini akan terus diupdate. Pantengin terus!
Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال