Android – RecyclerView with one layout, multiple setVisibility

I have a basically all in one layout which has everything needed for my app’s main feed. All variable items (images, video thumbnails.. Etc.) are set to GONE at first and set to VISIBLE when it is needed.

The problem is sometimes, might be due to RecyclerView‘s recycling behavior, the item which is supposedto be GONE is VISIBLE in the wrong places.

Example :

Item no 1 contains Text

Item no 2 contains Image

Item no 3 contains Image

I keep scrolling down to item no x, then scroll back up and here’s what I get :

Item no 1 contains Image from item no x, sometimes item no 3

Item no 2 contains Image

Item no 3 contains Image

I’m using a custom ViewHolder which extends RecyclerView.ViewHolder. The purpose of the CustomViewHolder is for layout declaration and initialization.

    ProgressBar progressBar;
    View viewDimmer;
    RelativeLayout postListWrapper;

    ...

    public ObjectViewHolder(View v) {
        super(v);
        progressBar = (ProgressBar)v.findViewById(R.id.post_inscroll_progressBar);
        viewDimmer = (View)v.findViewById(R.id.post_inscroll_viewDimmer);
        postListWrapper = (RelativeLayout)v.findViewById(R.id.post_inscroll_postListWrapper);
    }

An example of how I load the image :

Picasso.with(context)
    .load(youtubeThumbnailUrl)
    .fit()
    .centerCrop()
    .into(
        ((ObjectViewHolder) holder).userPostYoutubeImage
    );

I’ve set each visibility to GONE if no url is obtained from the server

((ObjectViewHolder) holder).userPostImageWrapper.setVisibility(View.GONE);
((ObjectViewHolder) holder).userPostYoutubeImageWrapper.setVisibility(View.GONE);

But somehow the image is still reused on the previous items (yes, not only Item no 1). Sometimes image are also in the wrong ImageView. Image D is supposed to be in ImageView D, but it’s in ImageView A instead.

Any guide for setting RecyclerView up and going nicely?

If I miss anything, or need to supply more code, please do inform me 😀

Answer

You need to put the else condition too. Like the example below.

// if no url is found from server
if(url == null){
  ((ObjectViewHolder) holder).userPostImageWrapper.setVisibility(View.GONE);
  ((ObjectViewHolder) holder).userPostYoutubeImageWrapper.setVisibility(View.GONE);

} else {
  // Some url has found 
  ((ObjectViewHolder) holder).userPostImageWrapper.setVisibility(View.VISIBLE);
  ((ObjectViewHolder) holder).userPostYoutubeImageWrapper.setVisibility(View.VISIBLE);
}

Do this for each of the items you’ve got there as the list item in case of you’re setting their visibilities in runtime.