Cells are not staggered in using RecyclerView with StaggeredGridLayoutManager in Android

Question

I am developing an Android app. I am not good in Android development. In my app, I am using RecyclerView and CardView with StaggeredGridLayoutManager. Because I want each cell size in the list different to each other and staggered like in below image.

But when I run my app, cells are not staggered and they are equal in size to each other.

This is screenshot

This is my recycler view XML

<android.support.v7.widget.RecyclerView
        android:id="@+id/df_rv_destination"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

This is XML for cell item

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/di_iv_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:textSize="17dp"
            android:textColor="@color/white"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/di_tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

This is how I configure my RecyclerView with StaggerGridLayoutManager

        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, 1);
        rcDestinations.setLayoutManager(staggeredGridLayoutManager);
        rcDestinations.setItemAnimator(new DefaultItemAnimator());
        regionsList = new ArrayList<Region>();
        destinationsAdapter = new DestinationsAdapter(getActivity(),regionsList);
        rcDestinations.setAdapter(destinationsAdapter);

So why is my RecyclerView not staggered? How can I fix it?

Answer 1

set your imageview with android:adjustViewBounds="true"

Answer 2

Your cell items all got the same size because there is nothing that would change size... I guess you want to get bigger items if you got bigger pics

First of all change this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

to this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

then instead of:

<ImageView
        android:id="@+id/di_iv_image"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

try:

<ImageView
        android:id="@+id/di_iv_image"
        android:scaleType="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

and scale the images height to your wished size before adding them ;) with cropCenter you always get the images cropped to the same size

666