使用 ViewPager2 折叠工具栏会出现滚动问题

Question

So I have this weird problem that only happens with the ViewPager2 that I've been trying to solve but have never seen anything like this reported before.

I'm trying to coordinate a ViewPager2 with a ToolBar to make it hide whenever the user scrolls the content inside it. It works fine when loading a fragment with a populated RecyclerView but behaves weird when the recycler is empty or there is no fragment at all.

Here are some gifs to shows the problem(First ViewPager2(Bug), Second ViewPager(Correct)).

As you can see in the first image it works correctly only if I select the toolbar but gives dragging problems whenever I grab the empty space where the NestedScrollView is.

And here is the xml layout for the ViewPager2:

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

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolBar"
        style="@style/Widget.MaterialComponents.Toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TabLayout.Colored" >

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Test" />

    </com.google.android.material.tabs.TabLayout>

</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

After a lot of time I finally solved it by removing the NestedScrollView and replacing it with the actual ViewPager2. Just remember to always setup a fragment or otherwise the toolbar will not scroll.

Here is the ViewPager2:

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

EDIT: If you still need to use a NestedScrollView put it inside the fragment and it will behave as expected.

Answer 2

Use ViewPager instead of ViewPager2. Because custom viewpager create issue in every scroll outside it. Like collapsing toolbar, switching tabs etc.

Answer 3

Unable to merely add comment but wanted to reiterate that correct solution is to fall back to use of ViewPager rather than ViewPager2.

I have a single activity with NavigationDrawer andn expanding action bar. UI starts with showing a MasterFragment whichi provides self-referencing drill down. At some point when you click on an item in master with actual content I show another fragment. Clicking on this fragment shows a 3-tab view and two of the tabs are WebView. Vertical scrolls in WebView were horribly broken and always inadvertently switched you to another tab. Switching back to ViewPager totally fixed these issues.