RecyclerView - horizontal, two-row grid, second row offset

Question

I am trying to make a horizontally scrolling grid. It has two rows. The second row is offset (by half the width of one item, but that is trivial to calculate and doesn't matter here).

I am currently using RecyclerView and the GridLayoutManager from https://github.com/antoniolg/RecyclerViewExtensions/tree/master/library/src/main/java/com/antonioleiva/recyclerviewextensions

However, the offsetting is proving extremely difficult.

It should end up looking like

Does anybody have any suggestions for making the second row staggered like in the picture above?

Mahound

Answer 1

Use StaggeredGridLayoutManager with an ItemDecoration which adds the offset to the item at adapter position 0. You'll get the desired output. (via getItemOffsets). Alternatively, instead of an ItemDecoration, when onBind is called, you can set the first item's width such that it will include gap on left.

If your data set changes, don't call notifyDataSetChanged which will reset the historical calculations in SGLM. Instead, use detailed notify events like notifyItemRangeInserted so that SGLM will be able to recalculate layout without resetting positions.

Excursion

Answer 2

I don't know if you're still working on this, but my approach would be to render the items 2 at a time (top/bottom) with the appropriate offset, and then play with your horizontal margins (set them to negative) to create the overlap between item 2 and 3, etc.

You would have to tie OnTouchListeners to the individual items being rendered, not the RecyclerView entries.

Rounders