How to delete an item from a recyclerview in Android(Kotlin)

How to delete an item from a recyclerview in Android(Kotlin) :

In this post, we will learn how to delete or remove items from a recyclerview in Android using Kotlin. We will use the same project that we built in our last tutorial. The idea of deleting an item from recyclerview is that we need to delete it from the datasource and call an API to delete it from the server.

For this example, we will not use one API call because I don’t have a server where you can delete item :). We will delete the item locally i.e. from the recyclerview.

Creating the recyclerview item:

Let’s add one delete button to the recycler view item layout list_item.xml. It looks as like below :

The code for this xml file is as below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:layout_height="wrap_content"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="8dp"
    app:cardElevation="8dp"
    android:layout_margin="5dp">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintWidth_percent=".3"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:src="@drawable/ic_launcher_background"
            />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintEnd_toStartOf="@id/button"
            app:layout_constraintTop_toTopOf="parent"
            android:textSize="25sp"
            android:fontFamily="sans-serif"
            android:textColor="#212121"
            android:layout_marginStart="10dp"
            android:text="This is a very long title and here it is"
            android:layout_marginLeft="10dp" />
        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/ic_baseline_delete_24"
            app:layout_constraintWidth_percent=".08"
            app:layout_constraintDimensionRatio="1:1"
            android:layout_marginRight="5dp" />
        <TextView
            android:id="@+id/tvDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@+id/tvTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvTitle"
            app:layout_constraintBottom_toBottomOf="parent"
            android:textSize="18sp"
            android:fontFamily="sans-serif"
            android:text="This is a very long title and here it is"
             />
    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>

Adapter:

Inside the adapter class, we will get the reference of the delete button and on click of this button, we will call one function that deletes the data:

class MyAdapter(private val data: List<Property>) : RecyclerView.Adapter<MyAdapter.MyViewHolder>()  {

    private var listData: MutableList<Property> = data as MutableList<Property>
    inner class MyViewHolder(val view: View): RecyclerView.ViewHolder(view){

        fun bind(property: Property, index: Int){
            val title = view.findViewById<TextView>(R.id.tvTitle)
            val imageView = view.findViewById<ImageView>(R.id.imageView)
            val description = view.findViewById<TextView>(R.id.tvDescription)
            val button = view.findViewById<Button>(R.id.button)

            title.text = property.title
            description.text = property.description

            Glide.with(view.context).load(property.image).centerCrop().into(imageView)

            button.setOnClickListener{deleteItem(index)}

        }
    }

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

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

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.bind(listData[position], position)
    }

    fun deleteItem(index: Int){
        listData.removeAt(index)
        notifyDataSetChanged()
    }

    fun setItems(items: List<Property>){
//        listData = items
//        notifyDataSetChanged()
    }

}

Inside the bind method, we are adding one click listener to the delete button. It calls deleteItem with the index.
In deleteItem, we are removing the item from listData at position index. Also, we are calling notifyDataSetChanged() to reload the data in the recyclerview.

CodeVsColor

How to delete an item from a recyclerview in Android(Kotlin)