5

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Wai Yan Hein
  • 13,651
  • 35
  • 180
  • 372

3 Answers3

3

set your imageview with android:adjustViewBounds="true"

Chenmin
  • 121
  • 7
  • This does not provide an answer to the question. Once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/14080377) – Gustavo Morales Oct 24 '16 at 17:16
  • Thanks for the clarification @MoralesBatovski – Chenmin Oct 24 '16 at 17:29
1

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

666
  • 21
  • 2
  • If I set image scaleType to center, image width will not match to cell width. Alignments will not be proper. Especially with texts. – Wai Yan Hein May 29 '16 at 18:56
  • Yeah thats right, but you have to scale at least the images height before adding it to the imageView. Could you show me the part of the code where you add the pictures? – 666 May 29 '16 at 19:26
  • Nothing special. I just directly set the image using picasso. No modification. – Wai Yan Hein May 29 '16 at 19:46
  • But staggerd layout itself have that kind of feature. Right? – Wai Yan Hein May 29 '16 at 19:47
  • Yes it has! The problem is that you got big pictures and if you don't scale them in height you got a lot of pixels in height e.g. 600 (well looks ugly) so you have to scale at least the picture. If you scale it with centerCrop it will be cropped to the size of the cell. Try to set scaleY to 0.5 for example to scale to half height – 666 May 29 '16 at 19:52
-1

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

Milan Misic
  • 9
  • 1