title: Why element of a Staggered Grid Layout inside a RecyclerView is automatically Interchanging it's position when loading Images?
body: <p>I am using RecyclerView in my app to show  images  from the server, I am using Staggered Grid Layout for arrange the images in a Staggered format and also I am using Universal Image Loader to load Images.My problem is ,the positions of images are interchanging while loading from the server,for example, an image shown in the second column will automatically changing to first column and vice versa.I could not understand the reason for this ,can anyone help ?Thanks in advance.</p>
  
  <p>Recycler View and  StaggeredGridLayout</p>
  
  <pre><code>     RecyclerView rView = (RecyclerView)view.findViewById(R.id.recycler_view);
      rView.setHasFixedSize(true);
      rView.setItemAnimator(new DefaultItemAnimator());
      StaggeredGridLayoutManager stagGrid = new StaggeredGridLayoutManager(rowColumnValue,StaggeredGridLayoutManager.VERTICAL);
      rView.setLayoutManager(stagGrid);
  </code></pre>
  
  <p>RecyclerView Adapter.java</p>
  
  <pre><code>  public class RecyclerViewAdapter extends RecyclerView.Adapter&lt;RecyclerViewHolders&gt; {
  
  private ArrayList&lt;String&gt; itemList;
  private ArrayList&lt;String&gt; imageStatusList;
  private List&lt;ItemObject&gt; imageList;
  private Context context;
  String [] imageURLList=null;
  FragmentActivity fragmentActivity;
  ImageLoader imageLoader;
  
  public RecyclerViewAdapter(FragmentActivity activity, ArrayList&lt;String&gt; itemList,ArrayList&lt;String&gt; imageStatusList,String [] imageURLs) {
  
      this.itemList = itemList;
      this.imageStatusList=imageStatusList;
  
      this.context = context;
      this.fragmentActivity=activity;
      imageLoader = ImageLoader.getInstance();
      this.imageURLList=imageURLs;
  
      DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
              .cacheOnDisc(true).resetViewBeforeLoading(true).build();
  
      // .showImageForEmptyUri(fallback)
      //  .showImageOnFail(fallback)
      // .showImageOnLoading(fallback).build();
      //imageList =  imageLoader.displayImage(itemList,);
  
  
  
  }
  
  @Override
  public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
  
      View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_list, null);
      RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView,imageURLList,fragmentActivity);
      return rcv;
  }
  
  @Override
  public void onBindViewHolder(RecyclerViewHolders holder, int position) {
  
  
      imageLoader.displayImage(itemList.get(position), holder.recipeImage);
      imageStatusList.toString();
  
      try {
  
          if (imageStatusList.get(position).equals("approved")) {
              holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.varified));
          } else if (imageStatusList.get(position).equals("pending")) {
              holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.pending));
  
          }
  
      }
      catch (Exception e){
          e.printStackTrace();
      }
  
  
  }
  
  @Override
  public int getItemCount() {
  
      return this.itemList.size();
  
  }
  }
  </code></pre>
  
  <p>RecyclerViewHolder.java</p>
  
  <pre><code>public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{
  
  
  public ImageView recipeImage,rimage;
  int  likeButtonCount;
  String [] imageUrls;
  Context mContext;
  public RecyclerViewHolders(View itemView,String [] urlList,Context mContext) {
  
      super(itemView);
      itemView.setOnClickListener(this);
      recipeImage = (ImageView)itemView.findViewById(R.id.recipe_image);
      rimage=(ImageView)itemView.findViewById(R.id.image_status_imageview);
      imageUrls=urlList;
      this.mContext=mContext;
  
  }
  
  @Override
  public void onClick(View view) {
      int position = getPosition();
  
      ArrayList&lt;String&gt;  imageUrlArrayList = new ArrayList&lt;&gt;();
      imageUrlArrayList.add(imageUrls[position]);
      imagePopupWindow(imageUrlArrayList);
      Toast.makeText(view.getContext(), "Clicked = " + getPosition(), Toast.LENGTH_SHORT).show();
  }
  </code></pre>
  
  <p>RecyclerViewAdapter (Edited)</p>
  
  <pre><code>public class RecyclerViewAdapter extends RecyclerView.Adapter&lt;RecyclerViewHolders&gt; {
  
  private ArrayList&lt;String&gt; itemList;
  private ArrayList&lt;String&gt; imageStatusList;
  private List&lt;ItemObject&gt; imageList;
  private Context context;
  String [] imageURLList=null;
  FragmentActivity fragmentActivity;
  ImageLoader imageLoader;
  DisplayImageOptions options ;
  
  public RecyclerViewAdapter(FragmentActivity activity, ArrayList&lt;String&gt; itemList,ArrayList&lt;String&gt; imageStatusList,String [] imageURLs) {
  
      this.itemList = itemList;
      this.imageStatusList=imageStatusList;
  
      this.context = context;
      this.fragmentActivity=activity;
      imageLoader = ImageLoader.getInstance();
      this.imageURLList=imageURLs;
  
      options  = new DisplayImageOptions.Builder().cacheInMemory(true)
              .cacheOnDisc(true).resetViewBeforeLoading(true)
              .showImageForEmptyUri(fragmentActivity.getResources().getDrawable(R.drawable.wedcake))
              .showImageOnFail(fragmentActivity.getResources().getDrawable(R.drawable.wedcake))
              .showImageOnLoading(fragmentActivity.getResources().getDrawable(R.drawable.wedcake)).build();
  
  
  }
  </code></pre>
  
  <p>onBindViewHolder.java</p>
  
  <pre><code> @Override
  public void onBindViewHolder(RecyclerViewHolders holder, int position) {
  
  
   //   imageLoader.displayImage(itemList.get(position), holder.recipeImage,options);
  
  
      holder.bind(itemList.get(position));
      imageStatusList.toString();
  
      try {
  
          if (imageStatusList.get(position).equals("approved")) {
              holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.varified));
          } else if (imageStatusList.get(position).equals("pending")) {
              holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.pending));
  
          }
  
      }
      catch (Exception e){
          e.printStackTrace();
      }
  
  
  }
  </code></pre>
  
  <p>RecyclerViewHolder.java</p>
  
  <pre><code>public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{
  
  
  public ImageView recipeImage,rimage;
  int  likeButtonCount;
  String [] imageUrls;
  Context mContext;
  ImageLoader imageLoader;
  DisplayImageOptions options ;
  public RecyclerViewHolders(View itemView,String [] urlList,Context mContext) {
  
      super(itemView);
      itemView.setOnClickListener(this);
      recipeImage = (ImageView)itemView.findViewById(R.id.recipe_image);
      rimage=(ImageView)itemView.findViewById(R.id.image_status_imageview);
      imageUrls=urlList;
      this.mContext=mContext;
      imageLoader = ImageLoader.getInstance();
      options  = new DisplayImageOptions.Builder().cacheInMemory(true)
              .cacheOnDisc(true).resetViewBeforeLoading(true)
              .showImageForEmptyUri(mContext.getResources().getDrawable(R.drawable.wedcake))
              .showImageOnFail(mContext.getResources().getDrawable(R.drawable.wedcake))
              .showImageOnLoading(mContext.getResources().getDrawable(R.drawable.wedcake)).build();
  
  
  
  }
   @Override
  public void onClick(View view) {
      int position = getPosition();
  
      ArrayList&lt;String&gt;  imageUrlArrayList = new ArrayList&lt;&gt;();
      imageUrlArrayList.add(imageUrls[position]);
      imagePopupWindow(imageUrlArrayList);
      Toast.makeText(view.getContext(), "Clicked = " + getPosition(), Toast.LENGTH_SHORT).show();
  }
  
  
  public void bind(String items){
  
      imageLoader.displayImage(items, recipeImage, options);
  }
  </code></pre>