Why is my staggered grid layout unbalanced?

Question

I've created a recycler view, and its layout is managed using staggered grid layout. But the result is not balanced, anyone can help?

What I've done is :

val manager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
photoRv.layoutManager = manager

EDIT 2020-08-02 Here is my item layout

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

    <data>

    </data>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp">

        <ImageView
            android:id="@+id/photo_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerInside"
            tools:src="@drawable/img_haji" />

    </com.google.android.material.card.MaterialCardView>
</layout>

And here is my bottom sheet layout containing the recycler view

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

    <data>

    </data>

    <LinearLayout
        android:id="@+id/gallery_bs"
        style="@style/general_bottom_sheet">

        <include layout="@layout/bottom_sheet_grip" />

        <FrameLayout
            style="@style/bottom_sheet_header_layout">

            <include
                android:id="@+id/close_btn"
                layout="@layout/bottom_sheet_close_btn" />

            <TextView
                style="@style/bottom_sheet_title"
                android:text="@string/gallery" />

        </FrameLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/photo_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            tools:itemCount="4"
            tools:listitem="@layout/service_gallery_bottom_sheet_item" />

    </LinearLayout>

</layout>

Answer 1

Try to add android:minHeight="100dp" in xml file to your ImageView:

<ImageView
    android:id="@+id/photo_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:minHeight="100dp"
    android:scaleType="centerInside"
    tools:src="@drawable/img_haji" />

I had the same issue and it worked for me.

Answer 2

Try calling layoutManager.invalidateSpanAssignments() after you have new elements added to the list.