Stop items from moving around when using StaggeredGridLayoutManager

Question

I'm using recyclerview with staggredGridLayoutManager in android. The problem is, sometimes when scrolling items move around to fit in the screen. Normally it's nothing to worry about but in my case it messes up everything! So is there anyway to stop this behavior? Not just the animation. The whole items rearranging stuff. thank you

Answer 1

If you are using Picasso then First create a custom ImageView

public class DynamicHeightImageView extends ImageView  {

private double mHeightRatio;

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

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

//Here we will set the aspect ratio
public void setHeightRatio(double ratio) {
    if (ratio != mHeightRatio) {
        mHeightRatio = ratio;
        requestLayout();
    }
}

public double getHeightRatio() {
    return mHeightRatio;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    if (mHeightRatio > 0.0) {
        // set the image views size
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = (int) (width * mHeightRatio);
        setMeasuredDimension(width, height);
    } else {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}


}

Then in your onBindViewHolder

Picasso.with(context).load(modal.image.mediumUrl).into(holder.profileImage, new Callback() {
            @Override
            public void onSuccess() {
                holder.profileImage.setHeightRatio(holder.profileImage.getHeight()/holder.profileImage.getWidth());
            }

            @Override
            public void onError() {

            }
        });

Answer 2

Using the ImageView suggested in Randy's answer you can do the same with Glide:

  Glide.with(context)
            .load(imageURL)
            .asBitmap()
            .dontAnimate()
            .fitCenter()
            .diskCacheStrategy(DiskCacheStrategy.RESULT)
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {

                    if (bitmap != null)
                    {
                        holder.image.setHeightRatio(bitmap.getHeight()/bitmap.getWidth());
                        holder.image.setImageBitmap(bitmap);
                    }
                }
            });

Answer 3

After searching quite a bit I realized There is no viable solution! StaggeredGridLayoutManager will rearrange its items that causes the item to move around. Unless we write a completely customized version of LayoutManager witch is not very easy, I doubt that there is a way to handle this.