title: StaggeredGridLayoutManager and moving items
body: <p>I have created a very simple project, displaying 28 images with <code>StaggeredGridLayoutManager</code> by recyclerview. but as I scroll the recyclerview it moves items for example from left to right or swap the column of left and right.</p>
  
  <h2>codes:</h2>
  
  <pre><code>import java.util.ArrayList;
  import java.util.List;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.support.v7.widget.RecyclerView;
  import android.support.v7.widget.StaggeredGridLayoutManager;
  
  
  public class MainActivity extends Activity {
  
  
      String mImageDir;
      private RecyclerView mRecyclerView;
      private StaggeredGridLayoutManager mLayoutManager;
  
  
  
      MyRecyclerAdapter myRecyclerAdapter;
      List&lt;ImageModel&gt; mImageList;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
  
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);   
          mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview_rootview);
          mLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);     
          mLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);        
          mRecyclerView.setLayoutManager(mLayoutManager);
          mRecyclerView.setHasFixedSize(false);
          mImageList = new ArrayList&lt;ImageModel&gt;();
          for (int i = 1; i &lt; 29 ; i++) {
              ImageModel img = new ImageModel();
              img.setTitle("Image No " + i);
              int drawableResourceId = this.getResources().getIdentifier("image"+String.valueOf(i), "drawable", this.getPackageName());
              img.setResId(drawableResourceId);
              mImageList.add(img);
  
          }
          myRecyclerAdapter = new MyRecyclerAdapter(MainActivity.this,mImageList);        
          mRecyclerView.setAdapter(myRecyclerAdapter);
  
      }
  
  } 
  </code></pre>
  
  <p>And the adapter:</p>
  
  <pre><code>public class MyRecyclerAdapter extends RecyclerView.Adapter&lt;MyRecyclerAdapter.ViewHolder&gt; {
  
  
      private List&lt;ImageModel&gt; mItems;
      Context mContext;
  
      public MyRecyclerAdapter(Context context,List&lt;ImageModel&gt; objects) {
          mContext = context;
          mItems = objects;
  
      }
  
      static class ViewHolder extends RecyclerView.ViewHolder{
          public  ImageView mImageView;
          public  TextView mTextView;
          public View rootView;
          public ViewHolder(View itemView) {
              super(itemView);
              rootView = itemView;
              mImageView =(ImageView)itemView.findViewById(R.id.image);
              mTextView =(TextView)itemView.findViewById(R.id.title);
          }
      }
  
      @Override
      public int getItemCount() {
  
          return mItems.size();
      }
  
      @Override
      public void onBindViewHolder(ViewHolder holder, int position) {
  
          ImageModel item = mItems.get(position); 
          Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
          holder.mTextView.setText(item.getTitle());
      }
  
  
      @Override
      public ViewHolder onCreateViewHolder(ViewGroup parent, int arg1) {
          LayoutInflater inflater =    
                  (LayoutInflater) mContext.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
          View convertView = inflater.inflate(R.layout.item, parent, false);
          return new ViewHolder(convertView);
  
      }
  
  }
  </code></pre>
  
  <h2>and a sample moving item:</h2>
  
  <p><a href="http://i.imgur.com/FUapm2K.gif?1">http://i.imgur.com/FUapm2K.gif?1</a></p>
  
  <p>if you play (scroll up and down) you can discover more interesting animation :-)</p>
  
  <h2>How to prevent that and having stable layout like an ordinary listview?</h2>
  
  <h2>Edit</h2>
  
  <pre><code>@Override
  public void onBindViewHolder(ViewHolder holder, int position) {
  
      ImageModel item = mItems.get(position);
      RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams)holder.mImageView.getLayoutParams();
      float ratio = item.getHeight()/item.getWidth();
      rlp.height = (int)(rlp.width * ratio);
      holder.mImageView.setLayoutParams(rlp);
      Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
      holder.mTextView.setText(item.getTitle());
  }
  </code></pre>