Scroll issues in horizontal and vertical recyclerview

Question

I have a MotionLayout with a ViewPager. Inside one of the fragments that's hosted by the ViewPager I have a vertical RecyclerView with two horizontal RecyclerViews. Scrolling vertially works fine, however, when I try to scroll horizontally on the inner RecyclerViews it doesn't work very well. It seems to try to scroll vertically (Video of the issue here: https://youtu.be/94rQ5Qkr2ew) I suspect it's something to do with the combination of views I'm using but I'm not entirely sure how to go about fixing it or figuring out what's wrong. I have tried this on the inner (horizontal) RecyclerView and it doesn't seem to make much of a difference:

recyclerView.setOnTouchListener((v, event) -> {
        int action = event.getAction();
        View
        switch (action) {
            case MotionEvent.ACTION_CANCEL:
                v.getParent().requestDisallowInterceptTouchEvent(false);
            case MotionEvent.ACTION_UP:
                v.getParent().requestDisallowInterceptTouchEvent(false);
            case MotionEvent.ACTION_MOVE:
                v.getParent().requestDisallowInterceptTouchEvent(true);
                break;
        }
        return false;
    });

This is the layout file for the MotionLayout container:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/container"
                                                      xmlns:app="http://schemas.android.com/apk/res-auto"
                                                      xmlns:tools="http://schemas.android.com/tools"
                                                      xmlns:android="http://schemas.android.com/apk/res/android"
                                                      android:layout_width="match_parent"
                                                      android:layout_height="match_parent"
                                                      android:orientation="vertical"
                                                      app:layoutDescription="@xml/motion_scene_home_tab">

    <com.github.florent37.shapeofview.shapes.DiagonalView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="@dimen/header_elevation_expanded"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shape_diagonal_angle="@dimen/menu_header_angle"
        app:shape_diagonal_direction="left"
        app:shape_diagonal_position="bottom">

        <View
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/redE64"/>
    </com.github.florent37.shapeofview.shapes.DiagonalView>

    <TextView
        android:id="@+id/toolbar_title"
        style="@style/title.white"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:gravity="center"
        android:maxLines="1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="@dimen/status_bar_height"
        tools:text="Help Center Help Center Help Center "/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:elevation="2dp"
        android:textAlignment="center"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar_title"
        app:layout_constraintVertical_bias="0.0"
        app:tabBackground="@color/transparent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/white_50_percent"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_pager_guideline"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.35"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/view_pager_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.18"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

And it uses the following motion scene:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto">
    <Transition
        app:constraintSetEnd="@layout/fragment_home_end"
        app:constraintSetStart="@layout/fragment_home"
        app:duration="500">
        <OnSwipe
            app:dragDirection="dragUp"
            app:touchAnchorId="@id/view_pager"
            app:touchAnchorSide="top"/>
        <KeyFrameSet>
            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="0"
                app:target="@id/header"/>
            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="90"
                app:target="@id/header"/>
            <KeyAttribute
                android:elevation="@dimen/schedule_header_elevation_collapsed"
                app:framePosition="100"
                app:target="@id/header"/>

            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="0"
                app:target="@id/toolbar"/>
            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="90"
                app:target="@id/toolbar"/>
            <KeyAttribute
                android:elevation="@dimen/schedule_header_elevation_collapsed"
                app:framePosition="100"
                app:target="@id/toolbar"/>

            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="0"
                app:target="@id/tabs_bar"/>
            <KeyAttribute
                android:elevation="0dp"
                app:framePosition="90"
                app:target="@id/tabs_bar"/>
            <KeyAttribute
                android:elevation="@dimen/schedule_header_elevation_collapsed"
                app:framePosition="100"
                app:target="@id/tabs_bar"/>


            <KeyAttribute
                android:alpha="1"
                app:framePosition="0"
                app:target="@id/toolbar_title"/>

            <KeyAttribute
                android:alpha="0"
                app:framePosition="100"
                app:target="@id/toolbar_title"/>
        </KeyFrameSet>
    </Transition>
</MotionScene>

Any idea how I could fix this issue? Or at least improve it?

Answer 1

You can try this component https://gist.github.com/Veeyikpong/aec06cfaf66dfcad427a47654953cd7d

Sample usage

Just use this component as your normal recyclerview in XML like this:

<com.veeyikpong.utils.NestedHorizontalRecyclerView
           android:id="@+id/recyclerView"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content />

And you are good to go! Please mark as answer if this works :)

Answer 2

give nestadscrollingenabled = false to horizontal recyclerview in xml