RecycleView + grid with different image size

Question

I would like to do something like the following image:

As you can see, there's a gridlayout with two columns per row.

Inside each column, there is an image (that should fit different depending on its size) and two text, one on the top and another on botom.

Currently I've achieved this:

Everything looks out of place. This is my layout:

<?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"
                                             android:layout_width="wrap_content"
                                             android:layout_height="wrap_content">

    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/elem_image" android:layout_margin="15dp"
            android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginStart="8dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginLeft="8dp" android:minHeight="150dp" android:minWidth="125dp"
            android:alpha="0.5" android:scaleType="fitCenter"
            android:maxHeight="200dp" android:maxWidth="150dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/elem_name"
            app:layout_constraintTop_toTopOf="@+id/elem_image" app:layout_constraintStart_toStartOf="@+id/elem_image"
            android:textColor="@color/colorPrimary" android:textSize="20sp" android:textStyle="bold"
            android:gravity="start"/>
    <TextView
            android:text="TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/elem_author" android:textSize="14sp"
            android:textColor="@color/colorAccent" android:layout_marginTop="128dp"
            app:layout_constraintTop_toTopOf="@+id/elem_image" android:layout_marginStart="64dp"
            app:layout_constraintStart_toStartOf="@+id/elem_image" android:layout_marginLeft="64dp"
            android:gravity="end"/>
</android.support.constraint.ConstraintLayout>

I've set min and max width and height but image is ignoring this. Also text "Title" and "Author" doesn't fit correctly.

How I can fix this?

You can use [**`StaggeredGridLayout`**](https://stackoverflow.com/q/34216890/7666442) — AskNilesh, Mar 16 '19 at 10:46
I'm already using this. I'll take a look at the examples on the link. — Lechucico, Mar 16 '19 at 10:47

score 1 · Accepted Answer · answered Mar 16 '19 at 10:51

1

you can use relativelayout to fit Title and Author name correctly and remove min and maximum height and width because wrap_content and scale type auto adjust height width.

answered Mar 16 '19 at 10:51

niceumang

1,347
1
8
21

RecycleView + grid with different image size

1 Answers1