I want to use a RecyclerView
to emulate the behavior of a MultiViewPager
, in particular I'd like to have the selected item at the center of the screen, including the first and the last element.
As you can see in this image, the first item is centered and this would be my expected result.
What I did was to setup a RecyclerView
with an horizontal LinearLayoutManager
and a LinearSnapHelper
. The problem with this solution is that the first and the last item will never be horizontally centered as selection. Should I switch my code so that it uses a MultiViewPager
or is it possible to achieve a similar result taking advantage of a RecyclerView
?
I ended up with this implementation in my project. You can pass different dimension in constructor to set the spacing between the items. As I wrote in the class' KDoc, it will add (total parent space - child width) / 2
to the left of first and to the right of last item in order to center first and last items.
import android.graphics.Rect
import android.view.View
import androidx.annotation.DimenRes
import androidx.recyclerview.widget.OrientationHelper
import androidx.recyclerview.widget.RecyclerView
/**
* Adds (total parent space - child width) / 2 to the left of first and to the right of last item (in order to center first and last items),
* and [spacing] between items.
*/
internal class OffsetItemDecoration constructor(
@DimenRes private val spacing: Int,
) : RecyclerView.ItemDecoration() {
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State,
) {
val itemPosition: Int = parent.getChildAdapterPosition(view)
if (itemPosition == RecyclerView.NO_POSITION) return
val spacingPixelSize: Int = parent.context.resources.getDimensionPixelSize(spacing)
when (itemPosition) {
0 ->
outRect.set(getOffsetPixelSize(parent, view), 0, spacingPixelSize / 2, 0)
parent.adapter!!.itemCount - 1 ->
outRect.set(spacingPixelSize / 2, 0, getOffsetPixelSize(parent, view), 0)
else ->
outRect.set(spacingPixelSize / 2, 0, spacingPixelSize / 2, 0)
}
}
private fun getOffsetPixelSize(parent: RecyclerView, view: View): Int {
val orientationHelper = OrientationHelper.createHorizontalHelper(parent.layoutManager)
return (orientationHelper.totalSpace - view.layoutParams.width) / 2
}
}
You can implement this with an RecyclerView.ItemDecoration
in getItemOffsets()
, to offset the first and last item appropriately.
Retrieve any offsets for the given item. Each field of
outRect
specifies the number of pixels that the item view should be inset by, similar to padding or margin. The default implementation sets the bounds of outRect to 0 and returns.If you need to access Adapter for additional data, you can call
getChildAdapterPosition(View)
to get the adapter position of the View.
You might need to use the messured size of the item and the RecyclerView
as well. But these information is available to be used anyhow.
The problem with this solution is that the first and the last item will never be horizontally centered as selection.
This is probably because your RecycleView is responsible for showing, within its layout bounds, exactly the number of items that are inside of your data set.
In the example image you provided, you can achieve that effect by adding a "placeholder" item in the first and last position of your dataset. This way, you can have an invisible item taking up the first slot, thus offsetting the item you want to be centered.
This placeholder item should not respond to touch events and should not interfere with handling of click events on other items (specifically, the position handling).
You will have to modify your adapters getItemCount
and perhaps getItemType
.
Just add padding on RecyclerView
and add clipToPadding=false
and it'll only affect the items on the ends.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With