ImageView lost their position after scrolling in RecyclerView

Question

Position of the Images are getting disturbed after scrolling in the RecyclerView each time. I am using Picasso library to place the images in to the RecyclerViewAdapter . I have tested the recyclerView it is working fine, the problem is in the onBindViewHolder .

In this VIDEO you can see that the first "hello" message disappear and the other image took that place.

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
  val chat: Chat = mChatList[position]

  //image message
    if(chat.getMessage() == "IMAGE" && chat.getUrl() != ""){

        if(chat.getSender() == currentUserID){
            holder.textMessage?.visibility = GONE
            holder.imageMessageOut?.visibility = VISIBLE
            holder.cardViewOut?.visibility = VISIBLE
            Picasso.get().load(chat.getUrl()).into(holder.imageMessageOut)
        }
        else if (chat.getSender() != currentUserID){
            holder.textMessage?.visibility = GONE
            holder.imageMessageIn?.visibility = VISIBLE
            holder.cardViewIn?.visibility = VISIBLE
            Picasso.get().load(chat.getUrl()).into(holder.imageMessageIn)
        }
    }

 //text message
    else {
        holder.textMessage?.text = chat.getMessage()
    }
}

this code is for the layout of the outgoing messages. this is the side of the sender.

        <androidx.cardview.widget.CardView
            android:id="@+id/card_out"
            android:layout_width="190dp"
            android:layout_height="190dp"
            android:visibility="gone"
            app:cardCornerRadius="10dp"
            app:cardElevation="0dp"
            app:cardBackgroundColor="#8DE3E3E3">

        <ImageView
            android:id="@+id/outgoing_image_message_iv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

        </androidx.cardview.widget.CardView>

        <TextView
            android:id="@+id/text_message_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_rounded_rectangle"/>

And this bug message comes continuously In the logcat.

E/UIFirst: failed to open /proc/31416/stuck_info, No such file or directory

Answer 1

This problem is occurring because you are not canceling the Picasso's request so whenever you scroll the RecyclerView the images start loading and they get confused by the requests for images and started appearing in the ImageView so you just have to cancel the requests in the else block of the condition like this

Picasso.get().cancelRequest(imageMessageOut)

Now you will see that the ImageView is empty but because you are setting your ImageView's and CardView's visibility as VISIBLE in the condition of image message so you will see a blank CardView in the place of messages. So for that you have to hide the ImageView and CardView or just only CardView because it is the parent layout for ImageView, so just set their visibility as GONE in the else block of image message like this

cardViewOut?.visibility = GONE

And don't forget to set the visibility of textMessage as VISIBLE because it has set as GONE in the if block

textMessage?.visibility = VISIBLE