RecyclerView list item view not updating (using DiffUtil.ItemCallback)

Question

SOLVED

RV - recycler view

I have an RV inside an alertdialog. Adapter for the RV extends ListAdapter with DiffUtil.ItemCallback. List for the adapter is being updated every 500ms using countdowntimer (checking whether the list item is downloaded or not).

The problem is, the list is updated and submitted to the adapter with the new data and but the list item view is not updating based on new data provided as shown below. I'm using data/view binding for updating the list item view.

The RV sometimes updates the item view when being scrolled.

PS: The RV is a child of NestedScrollView

This is how it is working right now

Adapter code

class AlarmSongsAdapter(
    private val onItemClicked: (AlarmSongItem) -> Unit,
    private val startDownloading: (String) -> Unit,
    private val insertDownloadEntityInDB: (DownloadEntity) -> Unit
) : ListAdapter<AlarmSongItem, AlarmSongsAdapter.AlarmSongsViewHolder>(DiffUtilCallback) {

object DiffUtilCallback : DiffUtil.ItemCallback<AlarmSongItem>() {
    override fun areItemsTheSame(oldItem: AlarmSongItem, newItem: AlarmSongItem): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: AlarmSongItem, newItem: AlarmSongItem): Boolean {
        return oldItem == newItem
    }
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AlarmSongsViewHolder {
    return AlarmSongsViewHolder(AlarmsSongListItemBinding.inflate(LayoutInflater.from(parent.context), parent, false), onItemClicked, startDownloading, insertDownloadEntityInDB)
}

override fun onBindViewHolder(holder: AlarmSongsViewHolder, position: Int) {
    holder.bind(getItem(position))
}

class AlarmSongsViewHolder(
    private val binding: AlarmsSongListItemBinding,
    private val onItemClicked: (AlarmSongItem) -> Unit,
    private val startDownloading: (String) -> Unit,
    private val insertDownloadEntityInDB: (DownloadEntity) -> Unit
) : RecyclerView.ViewHolder(binding.root) {
    fun bind(alarmSongItem: AlarmSongItem) {
        binding.alarmSongItem = alarmSongItem
        binding.executePendingBindings()
    }

    init {
        binding.downloadButton.setOnClickListener {
            val alarmSongItem = binding.alarmSongItem!!
            when(alarmSongItem.downloadState){
                Download.STATE_STOPPED -> {
                    startDownloading(alarmSongItem.audioFile)
                    val storageInfo = StorageUtils.currentStorageTypeAndPath(binding.root.context)
                    insertDownloadEntityInDB(alarmSongItem.toDownloadEntity(storageInfo))
                }
                else -> {}
            }
        }

        binding.root.setOnClickListener {
            onItemClicked(binding.alarmSongItem!!)
        }
    }
}
}

List item view code

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<data>
    <variable
        name="alarmSongItem"
        type="com.baja.app.domain.models.AlarmSongItem" />
</data>

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:cardElevation="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <androidx.cardview.widget.CardView
            android:id="@+id/song_item_thumbnail_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@android:color/transparent"
            app:cardCornerRadius="6dp"
            app:cardElevation="0dp">

            <ImageView
                android:id="@+id/song_item_thumbnail"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerVertical="true"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/bg_default_light"
                tools:ignore="ContentDescription"
                app:thumbnailFromUri="@{alarmSongItem.thumbnail}" />

        </androidx.cardview.widget.CardView>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:id="@+id/download_progress_container"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true">

            <ImageView
                android:id="@+id/download_bg"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:scaleType="centerCrop"
                app:srcCompat="?bg_default_circular"
                tools:ignore="ContentDescription"
                android:layout_centerInParent="true" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/download_button"
                style="@style/AppTheme.OutlinedButton.Icon"
                android:layout_width="32dp"
                android:layout_height="32dp"
                app:cornerRadius="32dp"
                app:icon="@drawable/ic_download"
                app:iconTint="@android:color/white"
                changeIcon="@{alarmSongItem.downloadState}"
                android:layout_centerInParent="true" />

            <com.google.android.material.progressindicator.ProgressIndicator
                android:id="@+id/download_progress_bar"
                style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate"
                android:layout_width="33dp"
                android:layout_height="33dp"
                app:circularRadius="17dp"
                app:indicatorColor="?attr/progressIndicatorColor"
                app:indicatorWidth="1dp"
                showProgressBar="@{alarmSongItem.downloadState}"
                android:layout_centerInParent="true"
                android:visibility="gone" />

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginStart="20dp"
            android:layout_toEndOf="@id/song_item_thumbnail_container"
            android:orientation="vertical"
            android:weightSum="2"
            android:layout_toStartOf="@id/download_progress_container"
            android:layout_marginEnd="8dp">

            <TextView
                android:id="@+id/song_item_name"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:ellipsize="end"
                android:gravity="bottom"
                android:maxLines="1"
                android:textSize="16sp"
                android:textStyle="bold"
                tools:text="Sa re ga ma pa"
                android:text="@{alarmSongItem.title}" />


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/song_item_artist"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="4dp"
                    android:ellipsize="end"
                    android:gravity="center_vertical"
                    android:maxWidth="150dp"
                    android:maxLines="1"
                    android:textSize="14sp"
                    tools:text="Sidharth Arun"
                    android:text="@{alarmSongItem.artist}" />

                <View
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_gravity="center_vertical"
                    android:background="@drawable/dot" />

                <TextView
                    android:id="@+id/song_item_duration"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginStart="4dp"
                    android:ellipsize="end"
                    android:gravity="center_vertical"
                    android:maxLines="1"
                    tools:text="10:12"
                    app:formatDuration="@{alarmSongItem.duration}" />

            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

</com.google.android.material.card.MaterialCardView>

Binding Adapter functions

@BindingAdapter("thumbnailFromUri")
fun thumbnailFromUri(view: ImageView, uri: String) {
    Glide.with(view).load(uri).placeholder(R.drawable.bg_default_light).error(R.drawable.bg_default_light).into(view)
}

@BindingAdapter("changeIcon")
fun changeIconBasedOnDownloadState(view: MaterialButton, state: Int) {
    when (state) {
        Download.STATE_COMPLETED -> view.setIconResource(R.drawable.ic_check)
        else -> view.setIconResource(R.drawable.ic_download)
    }
}

@BindingAdapter("showProgressBar")
fun showProgressbarBasedOnState(view: ProgressIndicator, state: Int) {
    when (state) {
        Download.STATE_QUEUED,
        Download.STATE_RESTARTING,
        Download.STATE_DOWNLOADING -> view.visibility = View.VISIBLE
        else -> view.visibility = View.GONE
    }
}

Answer 1

The video was extremely helpful in pinpointing the probelm.

Your Diffutils "areContentsTheSame()" is checking the item not an individual property of the item. When the file is downloaded you need to have "areContentsTheSame()" check the download property to tell if there was a change in the specific property.

example

class MyDiffCallback : DiffUtil.ItemCallback<Dev>() {
    ... 

    override fun areContentsTheSame(oldItem: Dev, newItem: Dev): Boolean {
        return oldItem.downloadStatus == newItem.download.status && 
        oldItem == newItem
    }
}

Answer 2

The problem is, the list is updated and submitted to the adapter with the new data and but the list item view is not updating based on new data provided as shown below. I'm using data/view binding for updating the list item view.

This happens because you're submitting the same list to your submitList() you can take a look at this post for more information

I've had the same issue recently and I've been able to resolve it quite easily by using onBindViewHolder(holder: AlarmSongsViewHolder, position: Int, payloads: MutableList<Any>)

In your DiffUtilCallback:

const val BUNDLE_TIME = "bundle_time"
object DiffUtilCallback : DiffUtil.ItemCallback<AlarmSongItem>() {
    override fun areItemsTheSame(oldItem: AlarmSongItem, newItem: AlarmSongItem): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: AlarmSongItem, newItem: AlarmSongItem): Boolean = false

    // This will be called every time you submit a list (so every 500ms)
    override fun getChangePayload(oldItem: AlarmSongItem, newItem: AlarmSongItem): Any {
        val diffBundle = Bundle()

        // pass the data you want to update
        diffBundle.putLong(BUNDLE_TIME, newItem.time)

        return diffBundle
    }
}

and then in your adapter override: note that there is payloads:MutableList at the end

override fun onBindViewHolder(holder: AlarmSongsViewHolder, position: Int, payloads: MutableList<Any>) {
    if(payloads.isEmpty()) {
        // if empty it's a new item that appears on the screen
        super.onBindViewHolder(holder, position, payloads)
        return
    }
    payloads.forEach { when(it) {
        is Bundle -> {
            val time = it.getLong(BUNDLE_TIME)
            holder.binding.alarmSongItem.time.text = time.toString()
        }
    }}
}

You can even create a function in your ViewHolder to pass the data to update if you don't want to expose binding

class AlarmSongsViewHolder(
    private val binding: AlarmsSongListItemBinding,
    private val onItemClicked: (AlarmSongItem) -> Unit,
    private val startDownloading: (String) -> Unit,
    private val insertDownloadEntityInDB: (DownloadEntity) -> Unit
) : RecyclerView.ViewHolder(binding.root) {

    fun bind(alarmSongItem: AlarmSongItem) {
        binding.alarmSongItem = alarmSongItem
        binding.executePendingBindings()
    }

    fun updateMyItem(time: Long) {
        binding.alarmSongItem.time.text = time.toString()
    }
}

Answer 3

Remove changeIconBasedOnDownloadState and put the code in bind(). Assuming AlarmSongItem.downloadState has a different value in the new list, this is what you need to do.

Move your Binding Adapter code to bind()

fun bind(alarmSongItem: AlarmSongItem) {
    binding.alarmSongItem = alarmSongItem
    binding.executePendingBindings()

     when (alarmSongItem.downloadState) {
        Download.STATE_QUEUED,
        Download.STATE_RESTARTING,
        Download.STATE_DOWNLOADING -> view.visibility = View.VISIBLE
        else -> view.visibility = View.GONE
    }
}

Answer 4

Your issue: the ViewHolder is not updated when you update the data

There are three ways to trigger a ViewHolder to reload the content:

1. you scroll it out of the screen and back in -> since it is a recyclerView it will reuse the ViewHolder for another Item and when you scroll back up, it will reload the first items -> updated the img
2. when you notify the adapter that an item changed
3. using DiffUtils and reload the ViewHolder by calling diffResult.dispatchUpdatesTo(adapter)

First options seems to be working for you!

For the second:
If you call adapter.notifyDataSetChanged() it will reload all ViewHolders.
If you call adapter.notifyItemChanged(int position) it will reload a specific item position.

To understand the origin of your issue, you might want to try this to just see whether the issue lies deeper.

For the third:
Please show the code where you calculate the DiffUtil result.

Answer 5

You need to add a method to your Adapter which will be called when list is updated

class AlarmSongsAdapter(alarmSongItems: List<AlarmSongItem>) : RecyclerView.Adapter<AlarmSongsAdapter.ViewHolder>() {

    private val mAlarmSongItems = mutableListOf<AlarmSongItem>()

    init {
        mAlarmSongItems.addAll(alarmSongItems)
    }

    fun swap(alarmSongItems: List<AlarmSongItem>) {
            val diffCallback = DiffUtilCallback(this.mAlarmSongItems, alarmSongItems)
            val diffResult = DiffUtil.calculateDiff(diffCallback)
    
            this.mAlarmSongItems.clear()
            this.mAlarmSongItems.addAll(alarmSongItems)
            diffResult.dispatchUpdatesTo(this)
        }
}

mAlarmSongItems is the initial list you passed to your adapter (Sorry, I didn't copy all your variables, just the one needed to show difference meaningful)

Your callback,

class DiffUtilCallback(
    private val oldList: List<AlarmSongItem>,
    private val newList: List<AlarmSongItem>
) : DiffUtil.Callback() {

    override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        return oldList[oldItemPosition].id == newList[newItemPosition].id
    }

    override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
        return oldList.get(oldItemPosition).equals(newList.get(newItemPosition));
    }

}

So now wherever your receive your updated countdowntimer values, where you initialized your adapter, you could do

alarmAdapter.swap(updatedAlarmValues)

Answer 6

I've solved the issue (in my way). Thanks for all the answers, they are really helpful, but not in my usecase.

Solution:

To make it work as accurately, I created another variable for download details(like state, percentage etc) in my rv_list_item.xml and passed the respective download.

DiffUtil is now working perfectly.