Search code examples
javaandroidandroid-toolbarandroid-nestedscrollview

Collapsing Toolbar with ViewPager2 gives scrolling issues


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.

Gif of the ViewPager2 Gif of the ViewPager

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>

Solution

  • 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.