Android - StaggeredGrid wrong items disposition

Question

I have a problem with my Recycler view and StaggeredGrid which cut the width by 2. I load images into items with Picasso and when I load image first time, they are disposed strangely in the recycler view. After reloading, everything seems good.

I think problem come from image loading : the StaggeredGrid doesn't know the image height the first time, but know after reloading because of cache.

How can i solve this problem ?

Possible duplicate of [Android RecyclerView StaggeredGrid items change position when scrolling top](http://stackoverflow.com/questions/34273295/android-recyclerview-staggeredgrid-items-change-position-when-scrolling-top) — David Medenjak, Jan 09 '16 at 16:00

score 1 · Answer 1 · answered Jan 09 '16 at 15:22

1

I think you have answered your own question. You need to load the images/determine their dimensions before adding the data to the recycler.

answered Jan 09 '16 at 15:22

ian.shaun.thomas

3,468
25
40

I already thought to do that, after try, it's already strange : when i try to set the imageview height with the image height, the result is bad. I don't understand the resizing system of imageviews – Okn Jan 09 '16 at 15:25
That is a bit of a different question. You could solve it by using pre determined image sizes, by having the image dimensions pass in with your initial data, waiting until you can later load the image then determine what the view bounds will be before adding the layout, etc. You would be wise to implement trying to pre size the images and ask a new question on specifically where you are stuck. – ian.shaun.thomas Jan 09 '16 at 15:34

score 0 · Accepted Answer · answered Jan 09 '16 at 16:16

Solved by changing gap strategy to :

StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
    manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
    recyclerView.setLayoutManager(manager);

Change the position of items automatically

score 0 · Answer 3 · answered Apr 21 '16 at 03:17

This happens because the holder dose not recognize the width and height of the Image view when you scroll up and down. It clears the upper view when you scroll down and vice versa.

Use like this :

@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {

MyViewHolder vh = (MyViewHolder) viewHolder;
ImageModel item = imageModels.get(position);
RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams)vh.imageView.getLayoutParams();
float ratio = item.getHeight() / item.getWidth();
rlp.height = (int) (rlp.width * ratio);
vh.imageView.setLayoutParams(rlp);
vh.positionTextView.setText("pos: " + position);
vh.imageView.setRatio(item.getRatio());
Picasso.with(mContext).load(item.getUrl()).placeholder(PlaceHolderDrawableHelper.getBackgroundDrawable(position)).into(vh.imageView);
}

For clear see this link: Picasso/Glide-RecyclerView-StaggeredGridLayoutManager

Android - StaggeredGrid wrong items disposition

3 Answers3

Linked