title: How to reset RecyclerView Viewholder layout when scrolling
body: <p>I'm using a <code>Viewholder</code> in my <code>RecyclerView</code> adapter, in which I'm dynamically creating ImageViews. However, when I scroll down and back up, the new images get displayed on top of the previous images. I understand that this is the concept of recycling but how can I reset/clear the <code>Viewholder</code>/layout so that old <code>ImageViews</code> do not appear on each recycled view?</p>
  
  <pre><code>public class RallyAdapter extends RecyclerView.Adapter&lt;RallyAdapter.ViewHolder&gt; {
  
  public static class ViewHolder extends RecyclerView.ViewHolder{
      public TextView nameTextView;
      public TextView dateTextView;
      public TextView creatorTextView;
      public ImageButton thumbnail;
      public RelativeLayout relativeLayout;
  
      public ViewHolder(View itemView) {
  
          super(itemView);
  
          relativeLayout = (RelativeLayout) itemView.findViewById(R.id.view);
          nameTextView = (TextView) itemView.findViewById(R.id.name);
          dateTextView = (TextView) itemView.findViewById(R.id.date);
          thumbnail = (ImageButton) itemView.findViewById(R.id.imageButton);
          creatorTextView = (TextView) itemView.findViewById(R.id.creator_name);
      }
  }
  
  private ArrayList&lt;Rally&gt; mRallys;
  private Context mContext;
  
  public RallyAdapter(Context context, ArrayList&lt;Rally&gt; rallys) {
      this.mRallys = rallys;
      this.mContext = context;
  }
  
  // Usually involves inflating a layout from XML and returning the holder
  @Override
  public RallyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  
      Context context = parent.getContext();
      LayoutInflater inflater = LayoutInflater.from(context);
  
      // Inflate the custom layout
      View rallyView = inflater.inflate(R.layout.rally, parent, false);
  
      // Return a new holder instance
      ViewHolder viewHolder = new ViewHolder(rallyView);
  
  
      return viewHolder;
  }
  
  // Involves populating data into the item through holder
  @Override
  public void onBindViewHolder(RallyAdapter.ViewHolder viewHolder, final int position) {
  
      // Get the data model based on position
      final Rally rally = mRallys.get(position);
  
      // Set item views based on the data model
      TextView nameTV = viewHolder.nameTextView;
  
      nameTV.setText(rally.getName());
  
      TextView dateTV = viewHolder.dateTextView;
  
      dateTV.setText(rally.getStartDate());
  
      ImageButton imageButton = viewHolder.thumbnail;
  
      TextView creatorTV = viewHolder.creatorTextView;
  
      creatorTV.setText(rally.getCreator_name());
  
      Picasso.with(mContext).load(rally.getThumbnail()).fit().centerCrop().into(imageButton);
  
      List&lt;String&gt; image_urls = rally.getTransportationImgs();
      List&lt;String&gt; methods = rally.getTransportationStrs();
      ArrayList&lt;ImageView&gt; IMGS = new ArrayList&lt;ImageView&gt;();
  
      for (int i = 0; i &lt; methods.size(); i++) {
  
          String method = methods.get(i);
  
          for (int j = 0; j &lt; image_urls.size(); j++) {
  
              String img_url = image_urls.get(j);
  
              if (img_url.toLowerCase().contains(method.toLowerCase()) == true) {
  
                  ImageView image = new ImageView(mContext);
                  dateTV = viewHolder.dateTextView;
                  imageButton = viewHolder.thumbnail;
  
                  image.setId(generateViewId());
  
                  IMGS.add(image);
  
                  RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
  
                  if (IMGS.size() &gt; 1) {
  
                      params.addRule(RelativeLayout.RIGHT_OF, IMGS.get(IMGS.size() - 1).getId());
                      params.addRule(RelativeLayout.ALIGN_TOP, IMGS.get(IMGS.size() - 1).getId());
                      params.addRule(RelativeLayout.END_OF, IMGS.get(IMGS.size() - 1).getId());
                  } else {
  
                      params.addRule(RelativeLayout.RIGHT_OF, imageButton.getId());
                      params.addRule(RelativeLayout.BELOW, dateTV.getId());
                      params.addRule(RelativeLayout.END_OF, imageButton.getId());
                  }
  
                  params.height = 65;
                  params.width = 65;
  
                  image.setLayoutParams(params);
  
                  viewHolder.relativeLayout.addView(image);
  
                  //viewHolder.relativeLayout.addView(rallyLayout);
  
                  Picasso.with(mContext).load(img_url).fit().centerCrop().into(image);
              }
          }
      }
  }
  </code></pre>
  
  <p>Here's how the views look on load. </p>
  
  <p><a href="https://i.stack.imgur.com/q7gSC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q7gSC.png" alt="enter image description here"></a></p>
  
  <p>After scrolling around for a bit...</p>
  
  <p><a href="https://i.stack.imgur.com/fvaQX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fvaQX.png" alt="enter image description here"></a></p>