Membuat Recyclerview dengan onclick listener menggunakan kotlin

Gimanasih caranya buat nampilin data berupa list di android? susah gak sih? recyclerview itu apaan sih?

Nahh daripada bingung karena pertanyaan diatas, mari kita jawab satu persatu! mulai dari apa itu recyclerview dan apa aja sih komponen yang ada di dalam recyclerview?

Recyclerview merupakan komponen dasar android untuk menampilkan data berupa list, dimana data tersebut sifatnya dinamis atau kita ga tau nih berapa banyak data yang bakal kita tampilkan. jadi komponen ini memungkinkan kita untuk menambah data secara dinamis kedalam UI kita. Dan recyclerview sendiri punya 3 komponen utama, antara lain :

1. Layout, komponen ini adalah view yang akan dibuat untuk setiap item yang bakal kita tampilkan kedalam recyclerview.
2. Adapter, komponen ini digunakan untuk menampung item berupa array/list yang nantinya bakal kita masukkan ke dalam viewHolder.
3. ViewHolder, komponen ini digunakan untuk men-cache view object ke dalam memori.

Selanjutnya, kita langsung aja implementasikan recyclerview ke dalam kodingan. Langkah pertama, kita buat dulu project baru dengan empty activity

Kemudian kita tambahkan dependency recyclerview ke dalam gradle:app

implementation "androidx.recyclerview:recyclerview:1.1.0"

Silahkan update versi 1.1.0 ke versi terbaru apabila sudah ada versi terbarunya.

Lalu kita aktifkan dataBinding di block android untuk menggantikan penggunaan findVewById() karena fungsi ini menggunakan banyak memori ketika melakukan pencarian.

android {
    ...
    dataBinding.enabled = true
    ...
}

Kemudian lakukan sinkronisasi pada gradle. Dan buat layout baru dengan nama item_negara.xml untuk setiap item recyclerview nya lalu tambahkan tag layout agar kita bisa menggunakan binding.

Lalu tambahkan recyclerview ke dalam activity_main.xml kita

Kemudian buat sebuah Pojo class bernama Negara.kt untuk menampung data negara

data class Negara (
    val namaNegara: String,
    val ibuKota: String
)

Lalu buat file NegaraAdapter.kt yang nantinya akan diisi dengan class adapter dan holder. Dan buat class NegaraAdapter dengan inner class NegaraViewHolder di dalamnya.

class NegaraAdapter(
    private val negara: List<Negara>
) : RecyclerView.Adapter<NegaraAdapter.NegaraViewHolder>() {

    inner class NegaraViewHolder(
        val itemNegaraBinding: ItemNegaraBinding
    ) : RecyclerView.ViewHolder(itemNegaraBinding.root)

}

Note :
ItemNegaraBinding didapatkan pada saat kita menambahkan tag <layout></layout> pada layout item_negara.xml

Kemudian kita tambahkan 3 method utama ke dalam class NegaraAdapter.

// untuk mendapatkan jumlah data yang dimasukkan ke dalam adapter
override fun getItemCount() = negara.size

// untuk membuat setiap item recyclerview 
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = NegaraViewHolder(
    DataBindingUtil.inflate(LayoutInflater.from(parent.context),
        R.layout.item_negara, parent, false)
)

// untuk memasukkan atau set data ke dalam view
override fun onBindViewHolder(holder: NegaraViewHolder, position: Int) {
    holder.itemNegaraBinding.tvNegara.text =      
       negara[position].namaNegara
    holder.itemNegaraBinding.tvIbukota.text = 
       negara[position].ibuKota
}

Ketika digabungkan akan menjadi seperti ini

Selanjutnya kita masukkan adapter ke dalam MainActivity. Tapi sebelumnya, kita inisialisasi dulu bindingnya

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

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

Kemudian kita buat list data negara dan adapternya di dalam onCreate()

Lalu coba running projectnya dan hasilnya akan seperti ini

Nahh kalau sudah berhasil dan hasilnya kurang lebih seperti gambar diatas, sekarang kita buat onClick nya pada setiap item di recyclerview nya.

Pertama, kita buat file kotlin untuk interface RecyclerViewClickListener, lalu buat method onItemClicked()

interface RecyclerViewClickListener {

    // method yang akan dipanggil di MainActivity
    fun onItemClicked(view: View, negara: Negara)

}

Kemudian di dalam class NegaraAdapter tambahkan variabel listener

class NegaraAdapter(
    private val negara: List<Negara>
) : RecyclerView.Adapter<NegaraAdapter.NegaraViewHolder>() {

    var listener: RecyclerViewClickListener? = null
    ... kode lainnya ...
}

Lalu pada method onBindViewHolder() tambahkan kode berikut

override fun onBindViewHolder(holder: NegaraViewHolder, position: Int) {
    holder.itemNegaraBinding.tvNegara.text = negara[position].namaNegara
    holder.itemNegaraBinding.tvIbukota.text = negara[position].ibuKota

    // event onclick pada setiap item
    holder.itemNegaraBinding.listNegara.setOnClickListener {
        listener?.onItemClicked(it, negara[position])
    }
}

Selanjutnya pada MainActivity, tambahkan interface RecyclerViewClickListener yang sebelumnya kita buat

class MainActivity : AppCompatActivity(), RecyclerViewClickListener {
    ...
}

Kemudian kita set click listener pada MainActivity di dalam method onCreate()

override fun onCreate(savedInstanceState: Bundle?) {
    ... kode lainnya ...
    val negaraAdapter = NegaraAdapter(listNegara)
    val recyclerView = binding.rvNegara

    // set click listener
    negaraAdapter.listener = this
    ... kode lainnya ...
}

Lalu tambahkan method onItemClicked() yang berasal dari interface RecyclerViewClickListener ke dalam class MainActivity

class MainActivity : AppCompatActivity(), RecyclerViewClickListener {
    ...
    override fun onItemClicked(view: View, negara: Negara) {
        Toast.makeText(this,
            "Negara ${negara.namaNegara} berhasil di klik",
            Toast.LENGTH_SHORT
        ).show()
    }
}

Setelah semuanya ditambahkan, codingan NegaraAdapter.kt dan MainActivity.kt menjadi seperti ini :

NegaraAdapter.kt

NegaraAdapter.kt

MainActivity.kt

MainActivity.kt

Jika sudah selesai semua, silahkan di run kembali dan hasilnya akan seperti ini :

Nahh itulah tutorial membuat recyclerview dengan onclick listener menggunakan bahasa kotlin. Semoga bermanfaat yaa!

Source code nya bisa diambil disini :

azmirizkifar20/Belajar-Recyclerview