How to use ViewPager2 with CollapsibleToolbar layout

Question

I am trying to achieve something with collapsible toolbar layout and I have 2 tabs with a viewPager2

Below are two images for example for the case of expanded screenshot and collapsed screenshot.

Below is the code I have in XML not sure where it is going wrong... my scroll is not working proper in this case. I want the toolbar to be stick on top when collapsed

I tried adding toolbar inside AppbarLayout but that didn't worked.

Also tried below links somehow not working for me Link1 Link2

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_dark_blue">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white_cream_darkest_blue"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:windowSoftInputMode="adjustResize">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white_cream_darkest_blue"
                app:collapsedTitleTextAppearance="@color/text_color"
                app:contentScrim="@color/white_cream_darkest_blue"
                app:expandedTitleTextAppearance="@color/text_color"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:statusBarScrim="@color/white_cream_darkest_blue">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_start"
                    android:layout_marginTop="40dp"
                    android:layout_marginEnd="@dimen/margin_end"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/textViewTitle"
                        style="@style/screen_title"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginTop="30dp"
                        android:text="Mailing\nAddress"
                        android:textColor="@color/text_color" />

                    <TextView

                        android:id="@+id/textViewSubTitle"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginTop="10dp"
                        android:fontFamily="@font/roboto_light"
                        android:text="We'll send your bill to this address."
                        android:textAlignment="center"
                        android:textColor="@color/text_color"
                        android:textSize="20sp"
                        android:visibility="gone" />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="30dp" />
                </LinearLayout>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginStart="@dimen/margin_start"
                    android:layout_marginEnd="@dimen/margin_end"
                    android:windowSoftInputMode="adjustResize"
                    app:contentInsetStartWithNavigation="0dp"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/text_service"
                    app:title="">

                    <TextView
                        android:id="@+id/menuOption"
                        style="@style/screen_sub_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/roboto_medium"
                        android:text="Mailing Address"
                        android:textColor="@color/text_color"
                        android:textSize="20sp"
                        android:visibility="gone" />


                </androidx.appcompat.widget.Toolbar>

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

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

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            android:clipToPadding="false"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabLayoutMailingAddress"
                    style="@style/tabLayoutStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_start"
                    android:layout_marginEnd="@dimen/margin_end"
                    app:layout_constraintTop_toTopOf="parent"
                    app:tabInlineLabel="true"
                    app:tabTextAppearance="@style/MyCustomTextAppearance" />

                <androidx.viewpager2.widget.ViewPager2
                    android:id="@+id/viewPagerMailingAddress"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    app:layout_constraintHeight_percent="1.2"
                    app:layout_constraintTop_toBottomOf="@+id/tabLayoutMailingAddress" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
</layout>

Answer 1

ViewPager2 won't work well inside NestedScrollView as its inner RecyclerView enables the nested scrolling by default.

To fix the misbehavior, you need to disable this nested scrolling of the ViewPager2 RecyclerView programmatically as it's not accessible in layout:

Kotlin:

viewPager.children.find { it is RecyclerView }?.let {
    (it as RecyclerView).isNestedScrollingEnabled = false
}

Java:

for (int i = 0; i < viewPager.getChildCount(); i++) {
    View child = viewPager.getChildAt(i);
    if (child instanceof RecyclerView) {
        ((RecyclerView) child).setNestedScrollingEnabled(false);
        break;
    }
}