[Tutorial] How to Implement a Click Listener to an Android Recycler View

 Hi, there Developer,

Recently we shared an article on how to create your first Recycler view with android in Kotlin,  and In this engaging post, We would like to share you with an interesting addition to that. A Recycler View is an advanced version of ListView in android with interesting features that you help you make an interesting UI and UX for your android application. And if you want to make it clickable and respond to the user interaction follow this tutorial to the end, In here you will learn how to set up a click listener to an android Recycler View.

Let's start with our basic setup by implementing a simple recycler view you can refer our Other guide on how to make an android recycler view with kotlin for a detailed and step by step instructions. Here we will only cover a part of that, think this as a part of the previous tutorial.

Android Recycler View Click Listener With Kotlin:

Add a simple recycler view to your layout, and set up an adapter to it, if your following from the previous tutorial, you can use the same recycler view adapter to it. The concept that we are going to implement to get a click listener to our Recycler view is by using the Callback functionality. 

In computer programming, a callback, also known as a "call-after"[1] function, is any executable code that is passed as an argument to other code; that other code is expected to call back (execute) the argument at a given time.

Source : Wikipedia

You can get a gist about callback from Wikipedia's explanation, although it would make more sense once you implemented it. To implement Callback to our recycler view, we need to have an interface. 

Learn how to create a recycler view in kotlin 

Create a new Kotlin file and define it as interface and name it as RecyclerViewClickListener and add a new function as onClicked() and pass some data like position and a string of the android version name.

interface RecyclerViewClickListener {

    fun onClickName(position:Int,versionName:String)

}

Now implement this interface into your main activity.like below

class MainActivity : AppCompatActivity() ,RecyclerViewClickListener{

}

In Kotlin we extend a class with ':' colon symbol and if we are wan to implement an interface which can be included in the same line followed by a ',' comma symbol.  You can implement more than one interface but you cannot extend more than one class.

Once you have implemented the interface you will get a red squiggly line on the class name, to remind you that you have to override those member functions which is onClickName(position: Int,verisonName: String). Tip: Place the cursor over the class name and Press Alt + Enter it will open a dialog box with a list of functions that you have to override.  In that overridden function make a toast message to show the version number that we just clicked,  You can refer our tutorial to Show Toast Message from You Activity With Kotlin here. After that, your class will be like below

MainActivity.kt

class MainActivity : AppCompatActivity() ,RecyclerViewClickListener{

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val androidVersionRecycler = findViewById<RecyclerView>(R.id.androidVersionRecycler)

        androidVersionRecycler.adapter = AndroidVersionRecyclerAdapter(resources.getStringArray(R.array.anroid_names),this)

    }

    override fun onClickName(position: Int, versionName: String) {

        Toast.makeText(applicationContext,"Clicked Android version $versionName at position = $position",Toast.LENGTH_SHORT).show()

    }

}

If you look in the above code that we passed a second parameter to our adapter which is "this" what it actually referring is the implemented click listener, why we pass that it because we use this "this" reference to call the function in the future as a callback. Okay, let's go deeper.

Learn How To Customize TextView In Android With XML

Now You can use our previous tutorial to create an Adapter which accepts two parameters one is the string array and a click listener interface

AndroidVersionRecyclerAdapter.kt

class AndroidVersionRecyclerAdapter(private val versionList:Array<String>, private val recyclerViewClickListener: RecyclerViewClickListener)

    :RecyclerView.Adapter<AndroidVersionRecyclerViewHolder>() {

        override fun onCreateViewHolder(

            parent: ViewGroup,

            viewType: Int

        ): AndroidVersionRecyclerViewHolder {

        return  AndroidVersionRecyclerViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.recycler_list_view,parent,false))

    }

    override fun getItemCount(): Int  = versionList.size

    override fun onBindViewHolder(holder:AndroidVersionRecyclerViewHolder, position: Int) {

        holder.bind(position,versionList[position],recyclerViewClickListener)

    }

} 

Actually, in this adapter, we are not going to do any much of work because our view is being rendered by the view holder so we are just passing our click listeners reference to the view holder. To access the parameters send through the constructor in kotlin we have to put some efforts in general we cannot access those parameters directly like we access the parameters of the function to access the constructor parameter it must have the var or val declaration so that it can be accessed inside the class.  Once you got the variable now send it to the bind function as a parameter.

Now In your view holder's bind function get the reference to the click listener create a new setOnClickListernt to your view it could be anything either a TextView or Button anything,  and inside that scope call the onClickName function with the passed as recyclerViewClickListerer, And this is what callback is, that you call that function in the future when you needed but is implemented already.

class AndroidVersionRecyclerViewHolder(view: View): RecyclerView.ViewHolder(view){

    val nameTextView = view.findViewById<TextView>(R.id.versionNames)

    fun bind(position:Int,versionName:String,recyclerViewClickListener: RecyclerViewClickListener){

        nameTextView.text = versionName

        nameTextView.setOnClickListener {

            recyclerViewClickListener.onClickName(position,versionName)

        }

    }

}

Above click, the listener is a normal click lister on a button which you can learn from here How to add click listener to a button in kotlin android , in the execution of the button call the necessary interface method so that it could callback that method. In this case, it will call the method in our activity as the recyclerviewClickLister holds the reference of the interface in our activity and since we are calling the method it will also call that method. This will show a Toast Message.

Pro Tip: If you are copy-pasting this code you might see the import statements missing, to quickly import, just click the class name and press Alt + Enter

Get the complete code here: Github Link 

BasicRecyclerView

You may have missed:

Andoird ViewPager2 Tutorial In Kotlin With Sample Code

Thanks for reading... 

!!!SPREAD THE WORD!!!

keywords

android recyclerview click listener kotlin

recyclerview item click listener in fragment

how to pass data from recyclerview adapter to fragment in android

recyclerview item click listener kotlin

kotlin recyclerview onitemclicklistener github