Android, RecyclerView with GridLayoutManager and ImageView as cell content does not fit the vertical space

user_195176 0
Viewed 1032

I'm trying to implement a simple grid of images.

Each image is the same size, the problem is that if I scale down the images (for example if I set a spanCount so that the gridlayout has to resize images to fit them) the "virtual-cell" that contains the image does not adapt to image size.

Here you can see the differences between spanCount=3 and spanCount=4.

enter image description hereenter image description here

If I use fitXY for the imageView this is the result, so the grid layout manager reduces the cell width but does not fit the cell height.

enter image description here

My grid layout xml:

       <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/grid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
            app:spanCount="4"
            tools:itemCount="30"
            tools:listitem="@layout/image_item" />

And image_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView 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"
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    tools:srcCompat="@tools:sample/avatars" />

My targets:

  • STEP 1: remove the gap between columns
  • STEP 2: resize the images so that they always fit the horizontal space (in this example with spanCount = 3 a small space is visible on the right)

To be more clear, I need to remove the space marked red.

enter image description here

gridlayoutmanager android-recyclerview android
2 Answers

If I may try answering this, in your image_item.xml I would suggest you change the layout width to match_parent like this

<?xml version="1.0" encoding="utf-8"?>
<ImageView 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"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    tools:srcCompat="@tools:sample/avatars" />

The logic behind this is since we already using GridLayout manager and our spanCount is 4, so the match_parent width will occupy all the space available to it, inside whatever spanCount is assigned.

Secondly centerCrop would be better I feel. It can automatically adjust all your images without them looking stretched.

EDIT: I feel you can get this done using the magic of ConstraintLayout, you will have to update your image_item.xml as follows

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        tools:srcCompat="@tools:sample/avatars"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

The logic here being the 0dp with GridLayout helps your image to occupy whatever width is available and dimensionRatio being one helps your width and height match equally.

user_156903980

It's seems like you are being affected by spanCount and ItemCount together with fitCenter. To solve the problem do this.

  1. Go to gridLayoutManager and specify the number of cells you want in your gridLayoutManager.

  2. Open your image_item.xml specify the width to match_parent and then you must specify the height e.g. 100dp. Don't do wrap content since images will be of different size and we are doing this to force the size of the cells to be equal so that each and every image to fit in the same manner.

  3. In your ImageView declare (android:scaleType="centerCrop") don't forget to remove spanCount, ItemCount and fitCenter.

Now this should work fine if everything is good on the Java side.

user_138643060
Related