RecyclerView with StaggeredGridLayoutManager with images loading from Glide

Question

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?

Answer 1

Finally i am able to find out the soultion. I had to create the custom imageview to vary its aspect ratio in Staggered Recycler View.

public class DynamicHeightNetworkImageView extends ImageView {
private float mAspectRatio = 1.5f;

public DynamicHeightNetworkImageView(Context context) {
    super(context);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public void setAspectRatio(float aspectRatio) {
    mAspectRatio = aspectRatio;
    requestLayout();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measuredWidth = getMeasuredWidth();
    setMeasuredDimension(measuredWidth, (int) (measuredWidth / mAspectRatio));
}
}

Then in onBindViewHolder of the adapter i set the aspect ratio of the image by -

Picasso.with(this).load(THUMB_URL).into(holder.thumbnailView);
holder.thumbnailView.setAspectRatio(ASPECT_RATIO));