RecyclerView with StaggeredGridLayoutManager with images loading from Glide

Viewed 9060

I am having a problem showing RecyclerView with StaggeredGridLayoutManager whose item contain an imageview and the image is loaded in imageview using glide. The problem i am facing is that after images getting loaded they are not staggered and are of equal sizes as well there is a big gap between two columns. How to vary the height of images with no gaps in columns?

5 Answers

Add android:adjustViewBounds="true" to the ImageView in the item layout and use CenterCrop and FitCenter in Glide like this:

Glide.with(vh.view.getContext())
        .load(item.getUrl())
        .centerCrop()
        .fitCenter()
        .thumbnail(0.3f)
        .placeholder(R.drawable.img_placeholder)
        .into(vh.image);

For me it's working

        Picasso.get()
                .load(uploadCurrent.getImageUrl())
                .placeholder(R.drawable.loading)
                .config(Bitmap.Config.RGB_565)
                .into(holder.imageView);

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/id_imgItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"/>
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/id_imgItemGets"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>
Related