I have recyclerView
which can be scrolled in horizontal orientation. Each view will snap to the center of the display. To implement this I used LinearSnapHelper. This tool works just fine.
Problem is with last and first item in a recyclerview. These two are not snapped to the center
as you scroll to the start. If you check recyclerview state at the beginning before scrolling happen, you can see that first item is in right position in a centre of the screen. I achieved this by adding my custom ItemOffsetDecoration. I've added extra padding for last and first view based on width of the display and view itself, so it will position it right in a middle.
Problem is, if you scroll the recyclerview and scroll it back to the start or the end, those views are not snapped to the middle. It looks like that LinearSnapHelper cannot detect them as snapped.
RecyclerViewInit:
timelineSnapHelper = LinearSnapHelper()
timelineViewManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
timelineViewAdapter = TimelineListAdapter(timelineViewManager, timelineList, this)
timelineOffsetDecoration = ItemOffsetDecoration(context!!, 32, 45)
timelineRecyclerView = view.findViewById<RecyclerView>(R.id.timeline_recycler_view).apply {
layoutManager = timelineViewManager
adapter = timelineViewAdapter
addItemDecoration(timelineOffsetDecoration)
setHasFixedSize(true)
}
timelineSnapHelper.attachToRecyclerView(timelineRecyclerView)
timelineRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {
if (newState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
val centerView = timelineSnapHelper.findSnapView(timelineRecyclerView.layoutManager)
val anim = AnimationUtils.loadAnimation(context, R.anim.scale_timeline_start)
centerView!!.startAnimation(anim)
anim.fillAfter = true
lastSnappedTime = centerView
} else if (lastSnappedTime != null){
lastSnappedTime = null
}
if(newState == AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL && lastSnappedTime != null){
val anim = AnimationUtils.loadAnimation(context, R.anim.scale_timeline_end)
lastSnappedTime!!.startAnimation(anim)
anim.fillAfter = true
}
}
})
Custom ItemDecoration:
class ItemOffsetDecoration(private val context: Context, private val edgePadding: Int, private var viewWidth: Int): RecyclerView.ItemDecoration() {
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State?) {
super.getItemOffsets(outRect, view, parent, state)
val itemCount = state!!.itemCount
val itemPosition = parent.getChildAdapterPosition(view)
// no position, leave it alone
if (itemPosition == RecyclerView.NO_POSITION) {
return
}
val displayMetrics = context.resources.displayMetrics
val displayWidth: Int = displayMetrics.widthPixels
val viewPixelWidth: Int = (viewWidth * (displayMetrics.densityDpi / 160f)).toInt()
val startEndPadding: Int = (displayWidth - viewPixelWidth) / 2
// first item
if (itemPosition == 0) {
outRect.set(startEndPadding, edgePadding, edgePadding, edgePadding)
}
// last item
else if (itemCount > 0 && itemPosition == itemCount - 1) {
outRect.set(edgePadding, edgePadding, startEndPadding, edgePadding)
}
// every other item
else {
outRect.set(edgePadding, edgePadding, edgePadding, edgePadding)
}
}
}
Short preview of the issue in app(I have to fix some animation bugs yet :D
):
You can now just use a SnapHelper. If you want a center-aligned snapping behavior similar to ViewPager then use PagerSnapHelper: SnapHelper snapHelper = new PagerSnapHelper(); snapHelper. attachToRecyclerView(recyclerView);
SnapHelper is a helper class that helps in snapping any child view of the RecyclerView. For example, you can snap the firstVisibleItem of the RecyclerView as you must have seen in the play store application that the firstVisibleItem will be always completely visible when scrolling comes to the idle position.
SnapHelper is a helper class that is used to snap any child of our RecyclerView. With the help of this class, we can display the specific number of RecyclerView items on our screen, and we can avoid the RecyclerView children's display inside our RecyclerView.
LinearSnapHelper
includes the item decoration in the measurement of the associated view, so your first and last view are never really centered since the measured view size extends to the left or right of the RecyclerView
.
You did not post your XML, so you might already do something like the following. The typical way to get start and end views centered correctly is to add padding to the RecyclerView
and specify android:clipToPadding="false"
. This is the same technique to move end views from FABs, etc.
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingStart="35dp"
android:paddingEnd="35dp"/>
Here 35dp
would have to be adjusted for your app and layouts and you will not need the item decoration shifting the views is its only purpose.
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