StaggeredGridLayout messes up when scrolling up

Question

I made this StaggeredGridLayout for my RecyclerView:

Here's the code:

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

    Photo photo = mPhotos.get(position);

    TextView titleView = ((CellViewHolder) viewHolder).titleTextView;
        titleView.setText(photo.getTitle());

    TextView subTitleView = ((CellViewHolder) viewHolder).subtitleTextView;
        subTitleView.setText(photo.getName());

    Picasso.with(mContext).load(photo.getPhotoUrl()).into(((CellViewHolder) viewHolder).imageView);

    ImageView userImageOverlay = ((CellViewHolder) viewHolder).userImageOverlay;

    StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) viewHolder.itemView.getLayoutParams();

    if (position == 0 || position % 4 == 0) {
        layoutParams.setFullSpan(true);
        layoutParams.height = Math.round(Utils.convertDpToPixel(202.67f, mContext));
        titleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 21.67f);
        subTitleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12.00f);
        userImageOverlay.setVisibility(View.VISIBLE);
    } else if ((position - 1) % 4 == 0) {
        layoutParams.setFullSpan(false);
        layoutParams.height = Math.round(Utils.convertDpToPixel(360.00f, mContext));
        titleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15.00f);
        subTitleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10.00f);
        userImageOverlay.setVisibility(View.GONE);
    } else {
        layoutParams.setFullSpan(false);
        layoutParams.height = Math.round(Utils.convertDpToPixel(180.00f, mContext));
        titleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15.00f);
        subTitleView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10.00f);
        userImageOverlay.setVisibility(View.GONE);
    }
}

Everything works fine except when I scroll it up. It draws cells by position in descending order and it leaves empty spaces in grid:

Any ideas how to keep the same pattern even scrolling it up?

score 4 · Accepted Answer · edited May 23 '17 at 12:33

4

Try this:

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

or:change position when scrolling

or:github project Picasso/Glide-RecyclerView-StaggeredGridLayoutManager

edited May 23 '17 at 12:33

Community

1
1

answered Apr 21 '16 at 03:35

YLS

1,475
2
15
35

score 1 · Answer 2 · answered Aug 31 '15 at 13:12

1

you need to set the gap strategy

mLayoutMang.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);

GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS will update the layous when the scroll state is changed to idle

answered Aug 31 '15 at 13:12

tyczj

71,600
54
194
296

I set GapStrategy before setting layout manager to recyclerView, but it gives no effect. Still the same. – Roo Aug 31 '15 at 13:28
@Roo hmm, I am not sure what you are doing with dynamically adjusting item sizes is exactly recommended in recyclerview but I could be wrong – tyczj Aug 31 '15 at 13:31
@Roo maybe instead of dynamically changing the height of the cell, make the cell have 2 imageviews in one and just hide one of them when you hit your condition `(position - 1) % 4 == 0` or inflate another view in the position – tyczj Aug 31 '15 at 13:38
see this answer http://stackoverflow.com/questions/26856036/how-to-reflow-items-in-a-recyclerview-with-the-staggeredgridlayoutmanager – tyczj Aug 31 '15 at 13:52

StaggeredGridLayout messes up when scrolling up

2 Answers2