Pin tablayout in Scrollview with appbarlayout

Question

My android app want to have a page like Facebook page which pin the tablayout on top of the screen when scroll below the tablayout.

I have found a few answers on this topic.

pin TabLayout to top and below the toolbar Scrollview

How to make tablayout fixed below action bar?

However, they don't want my app situation because I want to keep my cardview and tablayout in the scrollview. My xml template is as below. Any insight or solution can share?

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

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

<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">

//toolbar content
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"
android:layout_height="match_parent">


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


<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</LinearLayout>
</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

I believe you are using unnecessary layouts, try following code for guidance -

MainLayout File

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

<!--         you can put any content you want to hide after scroll in header-->
<!--         as example in putting this image view-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/default_img"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.25" />

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin"
                android:layout_gravity="bottom" />

        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--            put content of scroll view here -->
        <include layout="scroll_content_layout" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Above layout file will result in following result-

File scroll_content_layout.xml will have content you want as part of your scroll view.

ScrollContentFile

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
<!--    some other layout as part of scroll view -->
        
</LinearLayout>

Edit

Content inside CollapsingToolbarLayout will collaps on scroll. Any View you want to KEEP on TOP on a scroll or any other customization you need to use layout_collapseMode flag.

CollapseMode Parallax: The content will scroll but a bit slower than nested scroll view. You can control scroll speed with layout_collapseParallaxMultiplier flag.

CollapseMode Pin: The content will stay in the same place while this place is still inside the collapsing toolbar.

Please check Collapse modes of CollapsingToolbarLayout

Happy coding -