带有 SnapHelper 装饰的 RecyclerView

Question

I have a case when I have a photo gallery implemented as RecyclerView with SnapHelper. Some photos (those that take full screen width) are 'glued' together. I want to add some decoration to it so it white spaces in between items, but only when one starts scorlling otherwise I want a photo to take entire width. I've tried:

Creating custom decoration, I've manage to draw my decorating drawable off the screen so it would show only on scroll, but when overriding onDraw() it was invisible - hidden under next photo, and when I overrode onDrawOver() the edge of next photo was under divider. I was playing with adding padding to photos, and resetting it on idle state of recycler, but then the photo was jumping a bit.

I was also thinking of adding 'dummy' item between every photo that would act like divider, and force recycler to scroll by two position every time, but it seems that there might be better solution.

Answer 1

You're on the right track using an ItemDecoration, but the method you should override is getItemOffsets() instead of onDraw/onDrawOver. It lets you add space around your items.

class LinearHorizontalSpacingDecoration(@Px private val innerSpacing: Int) :
    RecyclerView.ItemDecoration() {

    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)

        val itemPosition = parent.getChildAdapterPosition(view)

        outRect.left = if (itemPosition == 0) 0 else innerSpacing / 2
        outRect.right = if (itemPosition == state.itemCount - 1) 0 else innerSpacing / 2
    }
}

Result with a 16dp spacing:

I've written a Medium post describing a step-by-step implementation of this kind of carousels using RecyclerView and SnapHelper, if you need more details (for example: how to achieve the scale effect).