CODEWITHSUNDEEP
androidandroid-recyclerviewandroid-cardviewstaggered-gridviewstaggeredgridlayout
Wai Yan Hein
Wai Yan Hein

Reputation: 14801

Cells are not staggered in using RecyclerView with StaggeredGridLayoutManager in Android

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.

enter image description here

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

This is screenshot

enter image description here

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?

Upvotes: 5

Views: 3312

Answers (3)

Milan Misic
Milan Misic

Reputation: 9

You need to force height resizing to have the effect you wanted.

I am using data binding so, a set the height like this:

public int getHeight(int position) {
    Random r = new Random();
    int randomHeight = r.nextInt(Math.abs(mRecyclerViewHeight)/9) + Math.abs(mRecyclerViewHeight)/4;
    if(position%2 == 0){
        randomHeight += Math.abs(mRecyclerViewHeight)/9;
    }
    return randomHeight;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {


        ((DiscoveryViewHolder) holder).bindRepository(mPostList.get(position), getHeight(position));

holder).bindRepository(mPostList.get(position)); }

Upvotes: -1

Chenmin
Chenmin

Reputation: 121

set your imageview with android:adjustViewBounds="true"

Upvotes: 3

666
666

Reputation: 21

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

Upvotes: 1

Related Questions