Kotlin RecyclerView with Click Listener

In this post we will create a RecyclerView with items that are clickable. The approach is a bit different from what we are used to when using ListView, but you will see further in the following lines how to do that. Prerequisites :

• kotlin_version = ‘1.3.31’

In app – build.gradle:

• implementation ‘androidx.appcompat:appcompat:1.0.2’
• implementation ‘androidx.constraintlayout:constraintlayout:1.1.3’

In this post we will write in Kotlin a very simple example for RecylcerView with a click listener that is applied directly on the item’s view.

activity_main.xml

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

list_item.xml

<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_item"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/list_item_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:padding="10dp"
        android:textSize="20sp" />
</androidx.appcompat.widget.LinearLayoutCompat>

Person.kt

class Person(val name: String)

MyCustomAdapter.kt

package com.example.kotlinrecyclerview 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.list_item.view.*

class MyCustomAdapter(val items: List<Person>, private val clickListener: (Person) -> Unit) :
    RecyclerView.Adapter<MyCustomAdapter.ViewHolder>() {
    override fun getItemCount(): Int {
        return items.size
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.list_item, parent, false) return ViewHolder(view)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {
        viewHolder.bind(items[position], clickListener)
    }

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        fun bind(person: Person, clickListener: (Person) -> Unit) {
            itemView.list_item_text_view.text =
                person.name itemView.setOnClickListener { clickListener(person) }
        }
    }
}

NOTE: itemView is a public member of the ViewHolder class from RecyclerView.

MainActivity.kt

package com.example.kotlinrecyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState) 
        setContentView (R.layout.activity_main)
        
        val person1 = Person("Diana1")
        val person2 = Person("Diana2")
        val person3 = Person("Diana3")
        val person4 = Person("Diana4")
        val person5 = Person("Diana5")
        val person6 = Person("Diana6")
        val person7 = Person("Diana7")
        val person8 = Person("Diana8")
        val persons = listOf(person1, person2, person3, person4, person5, person6, person7, person8)

        my_recycler_view.layoutManager = LinearLayoutManager (this)
        my_recycler_view.setHasFixedSize (true)
        my_recycler_view.adapter = MyCustomAdapter (persons, { person -> personItemClicked(person) })
    }

    private fun personItemClicked(person: Person) {
        Toast.makeText(this, "Clicked: ${person.name}", Toast.LENGTH_SHORT).show()
    }
}