How to set item to center of Recycler view when selected

Question

I am using a RecyclerView to display items horizontally. I want to set the selected item to center of the view like this

.

This is how I am doing it:

LinearLayoutManager layoutManager
                = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(layoutManager);

Answer 1

To obtain middle item on your screen from RecyclerView you can attach OnScrollListener to RecyclerView and inside listener you should get position of current items then you should check if area of given item is on middle of screen.

Code sample in Kotlin:

// Attach OnScrollListener to your RecyclerView
addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        recyclerView.post {
            selectMiddleItem()
        }
    }
})

// implementation of method that is called from OnScrollListener
private fun selectMiddleItem() {
    val firstVisibleIndex = layoutManager.findFirstVisibleItemPosition()
    val lastVisibleIndex = layoutManager.findLastVisibleItemPosition()
    val visibleIndexes = listOf(firstVisibleIndex..lastVisibleIndex).flatten()

    for (i in visibleIndexes) {
        val vh = findViewHolderForLayoutPosition(i)
        if (vh?.itemView == null) {
            continue
        }
        val location = IntArray(2)
        vh.itemView.getLocationOnScreen(location)
        val x = location[0]
        val halfWidth = vh.itemView.width * .5
        val rightSide = x + halfWidth
        val leftSide = x - halfWidth
        val isInMiddle = screenWidth * .5 in leftSide..rightSide
        if (isInMiddle) {
            // "i" is your middle index and implement selecting it as you want 
            // optionsAdapter.selectItemAtIndex(i)
            return
        }
    }
}

And as result you should get something like this:

Answer 2

This is for snapping the item in the center when scrolling, or when clicking on an ite.

You need to have a SnapHelper added to the RecyclerView. Here is how:

final RecyclerView recyclerViewObject = view.findViewById(R.id.recyclerViewObjectId);

final LinearSnapHelper snapHelper = new LinearSnapHelper();
snapHelper.attachToRecyclerView(recyclerViewObject);

recyclerViewObject.setOnFlingListener(snapHelper);

then you just call this code

recyclerViewObject.addOnItemTouchListener(
            new RecyclerItemClickListener(getContext(), recyclerViewObject ,new RecyclerItemClickListener.OnItemClickListener() {
                @Override public void onItemClick(View view, int position) {
                    recyclerViewObject.smoothScrollToPosition(position);
                }

                @Override public void onLongItemClick(View view, int position) {
                }
            })
    );

Answer 3

You can achieve the same output with minimal lines of code. Where, view is view of selected adapter item and StaticData.SCREEN_WIDTH is device width.

    View view = rvCategory.getChildAt(pos);
    if (view == null)
        return;
    int scrollX = (view.getLeft() - (StaticData.SCREEN_WIDTH / 2)) + (view.getWidth() / 2);
    rvCategory.smoothScrollBy(scrollX, 0);

Answer 4

Please try sort of this solution:

LinearLayoutManager layoutManager = ((LinearLayoutManager)recyclerView.getLayoutManager());
int totalVisibleItems = layoutManager.findLastVisibleItemPosition() - layoutManager.findFirstVisibleItemPosition()    
int centeredItemPosition = totalVisibleItems / 2;
    recyclerView.smoothScrollToPosition(position);
    recyclerView.setScrollY(centeredItemPosition );

Hope this helps.