Nested RecyclerView like Google Play Store App

Question

I am currently working on replicating the UI pattern implemented in the Play Store App. For implementing such a behavior, I have used a Vertical RecyclerView as outer view and added a horizontal RecyclerView inside the adapter of the outer Vertical RecyclerView.

The problem I am currently facing is while the outer RecyclerView is scrolling, the inner horizontal RecyclerView cannot catch the scroll event on it, but when the outer RecyclerView is not scrolling, we can scroll the horizontal RecyclerView smoothly.

If any one can be helpful please leave your comment. Cou can test the functionality in the Play store it enables the scroll of inner horizontal RecyclerView, even if the outer RecyclerView is scrolling.

Play store app:

Answer 1

Here's a tutorial for implementing such RecyclerView. You might also consider looking at the github repository as well.

The idea is to disable the touch detection of the outer RecyclerView when the inner RecyclerView is touched. See the implementation here in the parent RecyclerView adapter class.

// Disable touch detection for parent recyclerView if we use vertical nested recyclerViews
private View.OnTouchListener mTouchListener = new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        v.getParent().requestDisallowInterceptTouchEvent(true);
        return false;
    }
}; 

And then set the touch listener to the view.

view.findViewById(R.id.recyclerView).setOnTouchListener(mTouchListener);