MultiSelection of Item in Recycler View

Easiest Way to Implement Multi Selection of Item in Recycler View

Hello friends, in this blog post I am going to show you that how one can make a multi selection functionality for items in the Recycler View

So lets get started.

First add the following dependencies to your project:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //Recycler View Dependency
    implementation 'androidx.recyclerview:recyclerview-selection:1.0.0'
}

Now in this project we have two XML layout file:

1. For Main Activity which will contain the Recycler View 
2. For List View which will displayed for the single item

activity_main.xml

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.recyclerview.widget.RecyclerView>

</androidx.constraintlayout.widget.ConstraintLayout>

list_view_main.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">

    <TextView
        android:id="@+id/tvItems"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RecyclerView Item"
        android:padding="10dp"
        android:textSize="20sp" />
</LinearLayout>

After setting all the layouts lets go for the Kotlin coding. First we will make an interface for our onClick function.

RecyclerOnClick.kt

package e.a01.multiselectionrecyclerview

import android.view.View

interface RecyclerOnClick {

    fun onClick(view: View, position: Int)
}

Now using this interface we are going to build the onClick functionality for our application by implementing the function of interface in our Adapter class. Lets get our code ready for the MainAdapter.

MainAdapter.kt

package e.a01.multiselectionrecyclerview

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.list_view_main.view.*
import android.widget.Toast
import androidx.core.content.ContextCompat

class MainAdapter(private var items: ArrayList<String>, private var context: Context) :
    RecyclerView.Adapter<MainAdapter.MainViewHolder>(), RecyclerOnClick {

    var selectItem: ArrayList<String> = arrayListOf()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MainViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.list_view_main, parent, false)
        val viewHolder = MainViewHolder(view)
        view.setOnClickListener {
            onClick(it, viewHolder.adapterPosition)
        }
        return viewHolder
    }

    override fun getItemCount(): Int {
        return items.size
    }

    override fun onBindViewHolder(holder: MainViewHolder, position: Int) {
        val itemList = items[position]
        holder.itemView.tvItems.text = itemList
        holder.itemView.setOnClickListener {
            if (selectItem.contains(itemList)){
                selectItem.remove(itemList)
                unHighlightView(holder)
            }
            else{
                selectItem.add(itemList)
                highlightView(holder)
            }
        }
    }

    private fun unHighlightView(viewHolder: MainViewHolder){
        viewHolder.itemView.setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent))
    }

    private fun highlightView(viewHolder: MainViewHolder){
        viewHolder.itemView.setBackgroundColor(ContextCompat.getColor(context, android.R.color.holo_blue_light))
    }

    class MainViewHolder(view: View) : RecyclerView.ViewHolder(view)

    override fun onClick(view: View, position: Int) {
        Toast.makeText(context, " Clicked on: Item ${position + 1}", Toast.LENGTH_SHORT).show()
    }
}

And now the final part. We will write the code for the Main Activity which will show all the above parts on Android Screen in the form of UI.

MainActivity.kt

package e.a01.multiselectionrecyclerview

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

class MainActivity : AppCompatActivity() {

    private val item: ArrayList<String> = arrayListOf()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        Log.d("MainActivity","Activity started")

        for(i in 1 until 11){
            item.add("Item $i")
        }

        rvMain.adapter = MainAdapter(item, applicationContext)
        rvMain.layoutManager = LinearLayoutManager(applicationContext)
        rvMain.addItemDecoration(DividerItemDecoration(rvMain.context, DividerItemDecoration.VERTICAL))

    }
}