How to update an item in RecyclerView - Android

Intro

In this post we will demonstrate how to update an item in your RecyclerView. Updating an item in RecyclerView is useful when you are working with a list of elements that you will sent for example as a part of an API request, but the user has an option to alternate some or all of the elements in the list. For example you have a shopping card with items, but before the user goes to checkout he can make a change in the quantity of an item. Or you need to edit some name from a list you want to send to API.

Exercise

For this exercise we will use the project we created in the previous post, we will just create another branch and work there. In our exercise we have the following scenario: the user is able to click on an item in the RecyclerView, and on click we will display a popup dialog where the user can change and update the item name and save the changes.

First we will create the layout for the dialog. We will have an EditText where the user can enter the new item name, and also Save and Cancel buttons. The code for the layout will look like this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/edit_recyclerview_item"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <EditText
        android:id="@+id/itemNameEdit"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/enter_new_name"
        android:gravity="center"
        android:inputType="text"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <TextView
        android:id="@+id/save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="8dp"
        android:padding="4dp"
        android:text="@string/save"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@color/white"
        android:background="@color/teal_700"
        app:layout_constraintTop_toBottomOf="@id/itemNameEdit"
        app:layout_constraintEnd_toStartOf="@id/divider"
        app:layout_constraintWidth_percent=".2"
        />

    <View
        android:id="@+id/divider"
        android:layout_width="1dp"
        android:layout_height="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/itemNameEdit"
        />

    <TextView
        android:id="@+id/cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:padding="4dp"
        android:text="@string/cancel"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@color/white"
        android:background="@color/red"
        app:layout_constraintTop_toBottomOf="@id/itemNameEdit"
        app:layout_constraintStart_toEndOf="@id/divider"
        app:layout_constraintWidth_percent="0.2"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="16dp"
        app:layout_constraintTop_toBottomOf="@id/cancel"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="16dp"

android:text="@string/edit_recyclerview_item"

android:textSize="18sp"

android:textStyle="bold"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

<EditText

android:id="@+id/itemNameEdit"

android:layout_width="match_parent"

android:layout_height="60dp"

android:layout_marginTop="30dp"

android:layout_marginStart="16dp"

android:layout_marginEnd="16dp"

android:hint="@string/enter_new_name"

android:gravity="center"

android:inputType="text"

app:layout_constraintTop_toBottomOf="@id/title"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

<TextView

android:id="@+id/save"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginEnd="16dp"

android:layout_marginTop="8dp"

android:padding="4dp"

android:text="@string/save"

android:gravity="center"

android:textSize="16sp"

android:textColor="@color/white"

android:background="@color/teal_700"

app:layout_constraintTop_toBottomOf="@id/itemNameEdit"

app:layout_constraintEnd_toStartOf="@id/divider"

app:layout_constraintWidth_percent=".2"

<View

android:id="@+id/divider"

android:layout_width="1dp"

android:layout_height="1dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toBottomOf="@id/itemNameEdit"

<TextView

android:id="@+id/cancel"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginTop="8dp"

android:padding="4dp"

android:text="@string/cancel"

android:gravity="center"

android:textSize="16sp"

android:textColor="@color/white"

android:background="@color/red"

app:layout_constraintTop_toBottomOf="@id/itemNameEdit"

app:layout_constraintStart_toEndOf="@id/divider"

app:layout_constraintWidth_percent="0.2"

<View

android:layout_width="match_parent"

android:layout_height="16dp"

app:layout_constraintTop_toBottomOf="@id/cancel"

</androidx.constraintlayout.widget.ConstraintLayout>

Next we will need to implement the code to display the dialog on item click. We will use the same approach for the on click listener like we did in the previous post. We need to display the dialog on an RecyclerView item click event, so the code to display the dialog will go in our overridden onClickListener method in the activity, and it will look like this:

 val dialogBinding: PopupEditItemBinding =
            PopupEditItemBinding.inflate(
                LayoutInflater.from(this)
            )
        val dialog = Dialog(this)
        val itemNameEdit = dialogBinding.itemNameEdit
        val save = dialogBinding.save
        val cancel = dialogBinding.cancel

        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.setContentView(dialogBinding.root)
        dialog.window?.setLayout(
            WindowManager.LayoutParams.MATCH_PARENT,
            WindowManager.LayoutParams.WRAP_CONTENT
        )

val dialogBinding: PopupEditItemBinding =

PopupEditItemBinding.inflate(

LayoutInflater.from(this)

)

val dialog = Dialog(this)

val itemNameEdit = dialogBinding.itemNameEdit

val save = dialogBinding.save

val cancel = dialogBinding.cancel

dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)

dialog.setContentView(dialogBinding.root)

dialog.window?.setLayout(

WindowManager.LayoutParams.MATCH_PARENT,

WindowManager.LayoutParams.WRAP_CONTENT

)

In order to update an item in the RecyclerView we will need to create a method in our adapter that will receive the items position and the new name that we want the item to have as parameters. We will change the value of the name on the item in the selected position and use notifyItemChange() method to update the RecyclerView. This is the code for this method:

fun updateItem(position: Int, name: String) {
        items[position].itemName = name
        notifyItemChanged(position)
    }

fun updateItem(position: Int, name: String) {

items[position].itemName = name

notifyItemChanged(position)

}

Next we will need to setup the on click listeners for our save and cancel buttons in the dialog, so in the overridden onItemClickListener method we will add the following code:

 save.setOnClickListener {
            if (!TextUtils.isEmpty(itemNameEdit.text.toString())) {
                adapter.updateItem(position, itemNameEdit.text.toString())
                dialog.dismiss()
            } else {
                Toast.makeText(this, "Please enter a new name", Toast.LENGTH_SHORT).show()
            }
        }

 cancel.setOnClickListener {
            dialog.dismiss()
        }