Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with snapping of first and last item in recyclerview using LinearSnapHelper

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):

enter image description here

like image 580
martin1337 Avatar asked Jul 25 '18 08:07

martin1337


People also ask

How do I use SnapHelper in RecyclerView?

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);

What is snapping in 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.

What is a SnapHelper?

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.


1 Answers

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.

like image 143
Cheticamp Avatar answered Nov 08 '22 11:11

Cheticamp