After scrolling in ChatActivity the images which I have send in the chat are showing multiple times

Question

I can successfully send images in a conversation but whenever I am scrolling the images are showing multiple times. I have successfully retrieved the URL for the images from firebase.

Here is the ViewHolder of my RecyclerView.

public class MessageViewHolder extends RecyclerView.ViewHolder {

    public TextView messageText;
    public CircleImageView profileImage;
    public TextView displayName;
    public ImageView messageImage;

    public TextView timeText;

    public MessageViewHolder(View view) {
        super(view);

        timeText = view.findViewById(R.id.time_text_layout);
        messageText = (TextView) view.findViewById(R.id.message_text_layout);
        profileImage = (CircleImageView) view.findViewById(R.id.message_profile_layout);
        //   displayName = (TextView) view.findViewById(R.id.name_text_layout);
        messageImage = (ImageView) view.findViewById(R.id.message_image_layout);
    }
}

And the following is the onBindViewHolder and some other functions from my adapter.

@Override
public void onBindViewHolder(final MessageViewHolder viewHolder, int i) {

    Messages c = mMessageList.get(i);

    final String from_user = c.getFrom();
    String message_type = c.getType();

    mUserDatabase = FirebaseDatabase.getInstance().getReference().child("Users").child(from_user);
    mUserDatabase.keepSynced(true);
    mUserDatabase.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            // String name = dataSnapshot.child("name").getValue().toString();
            String image = dataSnapshot.child("thumb_image").getValue().toString();

            fuser = FirebaseAuth.getInstance().getCurrentUser();
            if (!from_user.equals(fuser.getUid())) {

                // viewHolder.displayName.setText(name);
                Picasso.with(viewHolder.profileImage.getContext()).load(image)
                        .placeholder(R.drawable.default_avatar).into(viewHolder.profileImage);
            }
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

    if (message_type.equals("text")) {
        // viewHolder.messageText.setText(View.VISIBLE);
        viewHolder.messageText.setText(c.getMessage());
    } else {
        // viewHolder.messageText.setText(c.getMessage());
        viewHolder.messageImage.setVisibility(View.VISIBLE);
        Picasso.with(viewHolder.messageImage.getContext()).load(c.getMessage())
                .placeholder(R.drawable.default_avatar).into(viewHolder.messageImage);
    }
}

@Override
public int getItemCount() {
    return mMessageList.size();
}

@Override
public int getItemViewType(int position) {
    String fuser = FirebaseAuth.getInstance().getCurrentUser().getUid().toString();
    if (mMessageList.get(position).getFrom().equals(fuser)) {
        return MSG_TYPE_RIGHT;
    } else {
        return MSG_TYPE_LEFT;

    }
}

I am not getting any error for this code. I have tried everything but unable to stop it from showing the images multiple times.

Answer 1

In your onBindViewHolder function, you are missing the else part I think. You need to put the profile image correctly for each item of your RecyclerView like the following.

if (!from_user.equals(fuser.getUid())) {
    Picasso.with(viewHolder.profileImage.getContext()).load(image).placeholder(R.drawable.default_avatar).into(viewHolder.profileImage);
} else {
    // Load the default avatar when the above condition fails.
    Picasso.with(viewHolder.profileImage.getContext()).load(R.drawable.default_avatar).into(viewHolder.profileImage);
}

And another similar error is in the following section of your code.

if(message_type.equals("text")) {
    // You need to set the visibility of the message image here as well
    viewHolder.messageImage.setVisibility(View.GONE);
    viewHolder.messageText.setText(c.getMessage());
} else {
    viewHolder.messageImage.setVisibility(View.VISIBLE);
    Picasso.with(viewHolder.messageImage.getContext()).load(c.getMessage()).placeholder(R.drawable.default_avatar).into(viewHolder.messageImage);
}

Hope that fixes your problem.