Autoscaling height of imageview in StaggeredGridLayout

Question

I have a recyclerview containing ImageView. But there is extra space at bottom of each image. The extra space is the red background as you can see on the screenshot. I would like all images to be side by side.

Here is the code in my Activity to define the layout manager

fun setupRecyclerView(recyclerView: RecyclerView) {
    val adapter = PictureAdapter()
    recyclerView.adapter = adapter
    recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
}

Here is my xml file for item in recyclerview:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools">

    <data>
        <variable
        name="viewModel"
        type="com.my.app.viewModel.PictureViewModel" />
    </data>

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        app:imageUrl="@{viewModel.imageUrl}"
        android:background="#ff0000"
        android:adjustViewBounds="true"
        android:scaleType="fitStart" />
</layout>

And I'm loading image with this

@BindingAdapter({"bind:imageUrl"})
public static void loadImage(final ImageView view, String imageUrl) {
    Picasso.with(view.getContext())
    .load(imageUrl)
    .into(view);
}

How can I do to automatically resize the height of my ImageView in order to remove the extra spacing? I don't want to crop my image. And if I put wrap_content in the ImageView's layout_height then the application become slow, the scroll is not smooth and I'm getting a lot of

The application may be doing too much work on its main thread.

Answer 1

You have to use Staggered gridview instead of simple Gridview . And in place of imageview you have to use DynamicHeightImageview. This will automatically adjust the image height and put image one after other like in Pinterest app. And it completely resolve your problem. Thanks