I want to populate a RecyclerView with 2 different Item types,

Column in the middle should have only the BIG_ITEM and the other columns should have the SMALL_ITEM, by using GridLayoutManager with 3 columns and specifying Item Types as

position % 3 == 1 -> BIG_ITEM else SMALL_ITEM

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

[![enter image description here][1]][1]

I tried to use ItemDecoration to specify a constant gap between small and big tiles but it didn't work either.

If I use StaggeredGridLayout tiles wrap the gap but the order changes so I no longer have the Big tiles in the middle.

So my question is how can I achieve this view? 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

[![enter image description here][2]][2]

override fun getItemViewType(position: Int): Int {
        return if (position.rem(3) == 1) {
            BIG_VIEW
        } else {
            SMALL_VIEW
        }
    }

Item Decoration I tried:

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)
    }
}

big item:

<?xml version="1.0" encoding="utf-8"?>
<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"
   >


    <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" />
</android.support.constraint.ConstraintLayout>

small item:

<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" />

0 Answers