Images in ListView in a screen widget are mixed

Question

I am developing a screen widget, in which I am using a ListView to load data.

In the class that extends from RemoteViewsService.RemoteViewsFactory, in the method getViewAt(position: Int); I try to load an image for the remote view:

    // Set avatar if any.
    if (contact.avatarUri != null) {
        try {

            val uri = Uri.parse(contact.avatarUri)

            val bitmap: Bitmap = Glide.with(context)
                    .asBitmap()
                    .load(uri)
                    .submit(avatarSize, avatarSize)
                    .get()

            val finalBitmap = getCircleBitmap(bitmap)

            view.setImageViewBitmap(id.customAvatarImageView, finalBitmap)
            view.setViewVisibility(id.customAvatarImageView, View.VISIBLE)
            view.setViewVisibility(id.avatarImageView, View.GONE)

        } catch (e: Exception) {
            Log.d(TAG, "Error when loading custom avatar: ${e.message}")
        }
    }

The problem is that when I scroll down, and later I scroll up, this images are 'mixed' between entries: for instance, the image that belongs to entry 1 is now at entry 3; so when I scroll up the entries have an incorrect image.

What is the best way to correct that?

Answer 1

The solution is to reset all views in getViewAt().