title: How to prevent StaggeredGridLayout Manager to reorder RecyclerView Items?
body: <p>I want to populate a RecyclerView with 2 different Item types,</p>
  
  <p>Column in the middle should have only the <code>BIG_ITEM</code> and the other columns should have the <code>SMALL_ITEM</code>, by using <code>GridLayoutManager</code> with 3 columns and specifying Item Types as </p>
  
  <p><code>position % 3 == 1 -&gt; BIG_ITEM else SMALL_ITEM</code></p>
  
  <p>I can achieve this but the problem is BIG_ITEM and SMALL_ITEM stays in order with the row, so SMALL_ITEM's don't fill the gap and I get this view
  instead</p>
  
  <p>[![enter image description here][1]][1]</p>
  
  <p>I tried to use ItemDecoration to specify a constant gap between small and big tiles but it didn't work either.</p>
  
  <p>If I use StaggeredGridLayout tiles wrap the gap but the order changes so I no longer have the Big tiles in the middle.</p>
  
  <p>So my question is how can I achieve this view? <strong>4 small tile height should be equal to 3 big tile height and big tiles should be in the middle. Yet the margin between tiles should be equal</strong></p>
  
  <p>[![enter image description here][2]][2]</p>
  
  <pre><code>override fun getItemViewType(position: Int): Int {
          return if (position.rem(3) == 1) {
              BIG_VIEW
          } else {
              SMALL_VIEW
          }
      }
  </code></pre>
  
  <p>Item Decoration I tried:</p>
  
  <pre><code>class ItemOffsetDecoration(private val mItemOffset: Int) : RecyclerView.ItemDecoration() {
  
      constructor(@NonNull context: Context, @DimenRes itemOffsetId: Int) : this(context.resources.getDimensionPixelSize(itemOffsetId)) {}
  
      override fun getItemOffsets(
          outRect: Rect, view: View, parent: RecyclerView,
          state: RecyclerView.State
      ) {
          super.getItemOffsets(outRect, view, parent, state)
          outRect.set(mItemOffset, mItemOffset, mItemOffset, mItemOffset)
      }
  }
  </code></pre>
  
  <p>big item:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
     &gt;
  
  
      &lt;ImageView
          android:id="@+id/imageView_kids_item"
          android:layout_width="500dp"
          android:layout_height="266dp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:srcCompat="@drawable/icon_no_image" /&gt;
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>small item:</p>
  
  <p></p>
  
  <pre><code>&lt;ImageView
      android:id="@+id/imageView_kids_item"
      android:layout_width="370dp"
      android:layout_height="200dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:srcCompat="@drawable/icon_no_image" /&gt;
  </code></pre>
  
  <p></p>