Stop NestedScrollView inside ViewPager to process horizontal scrolls

Question

I am trying to implement a view that is composed by a CoordinatorLayout with a ViewPager, and the NestedScroolViews are inside each ViewPager. I managed to make the Toolbar hide on scrolls, but I've been having the following issue:

Whenever I swipe left or right to change the content of the view pager, the gesture is forwarded to the NestedScrollView that sometimes registers a very small vertical scroll. It is small, but enough to be annoying.

This should explain the problem better:

Video: https://youtu.be/BGqynDDL68I

I've tried extending the NestedScrollView to block the scroll/fling methods but no success.

Has anybody gone through the same issue?

EDIT 1 : Code

Activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="main.MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--<include layout="@layout/main__activitycontent"/>-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/main__toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>


    <FrameLayout
        android:id="@+id/main__fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.TabLayout

        android:id="@+id/main__navigations_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@color/main__tabbar_button_color"
        app:layout_behavior="utils.views.TabLayoutBehaviour"
        app:tabIndicatorColor="@android:color/white"
        app:tabSelectedTextColor="@color/main__tabbar_selected_color"
        app:tabTextColor="@color/main__tabbar_normal_color"
        >


    </android.support.design.widget.TabLayout>

</android.support.design.widget.CoordinatorLayout>

Fragment With ViewPager

<android.support.v4.view.ViewPager
    android:id="@+id/meditationpager__pager"

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

Inner Fragment:

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="main.MainActivity"
    tools:showIn="@layout/main__activity">

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:context="domain.screens.readmeditation.MeditationFragment">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/large_text"/>

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

Answer 1

The cleanest solution I found was to extend the NestedScrollView and override the onTouch event like this:

public class VerticalOnlyNestedScrollView extends NestedScrollView {
    private static final String TAG = "VOnlyNestedScrollView";
    public VerticalOnlyNestedScrollView(Context context) {
        super(context);
    }

    private float startX, startY;

    public VerticalOnlyNestedScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VerticalOnlyNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        if (!(ev.getAction()== MotionEvent.ACTION_DOWN)&& ev.getHistorySize() > 0) {


            float yVector = ev.getY() - ev.getHistoricalY(0);
            float xVector = ev.getX() - ev.getHistoricalX(0);
            Log.d(TAG, "onInterceptTouchEvent: " + xVector + "--" + yVector);

            return Math.abs(yVector) <= Math.abs(xVector) || super.onTouchEvent(ev);
        }

        return super.onTouchEvent(ev);
    }
}

This way, the parent onTouch is only processed if yVector is greater than the xVector.

Answer 2

Try changing your Activity's structure like this:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="main.MainActivity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!--<include layout="@layout/main__activitycontent"/>-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/main__toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.view.ViewPager
            android:id="@+id/meditationpager__pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <android.support.design.widget.TabLayout
            android:id="@+id/main__navigations_tablayout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:background="@color/main__tabbar_button_color"
            app:tabTextColor="@color/main__tabbar_normal_color"
            app:tabSelectedTextColor="@color/main__tabbar_selected_color"
            app:tabIndicatorColor="@color/white"/>

    </LinearLayout>

This way your fragment with the view pager would be no longer necessary and you could setup your view using:

private void setupViewPager() {
    MyAdapter adapter = new MyAdapter(getSupportFragmentManager());

    InnerFragment fragment = new InnerFragment();
    adapter.addFragment(fragment);

    mViewPager.setAdapter(adapter);
}

I believe that with this approach, you wouldn't need to set your NestedScrollView's layout_behavior.