Stick TabLayout on top of screen

Question

I have a layout that contains a tree of views like below:

    - ConstraintLayout
     -- TextView
    - WebView
    - TabLayout (1) (3 tabs)
    - ViewPager (1)
    - TabLayout (2) (4 tabs)
    - ViewPager (2)

When user scrolls to ViewPager (1), TabLayout (1) will stick at top and able to interact like below GIF in Huobi app. And if user scrolls more to ViewPager (2), it will push TabLayout (1) out and TabLayout (2) will be sticked on top.

I tried some articles like (https://stackoverflow.com/a/44327350 -- It creates fake view and not able to interact header) and libs like (https://github.com/emilsjolander/StickyScrollViewItems -- quite too long no update) but i don't feel it good.

Any good practice on this? I see many apps used it but not sure will Google supports it natively and not sure what I missed.

Any help would be appreciated. Thanks.

---

Update 13/12/2021

<?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">

    <data />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/background_color">

        // Header 
        <include
            android:id="@+id/layout_header"
            layout="@layout/layout_header" />

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

                <WebView
                    android:id="@+id/wvChart"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/webview_height" />

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tl1"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/tablayout_height"
                    style="@style/TabLayoutStyle"
                    app:layout_constraintTop_toBottomOf="@id/wvChart"
                    app:tabTextAppearance="@style/TabLayoutTextStyle"/>

                <androidx.viewpager2.widget.ViewPager2
                    android:id="@+id/vpg1"
                    android:minHeight="@dimen/viewpager_market_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/background_color"
                    app:layout_constraintTop_toBottomOf="@id/tl1"/>

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tl2"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/tablayout_height"
                    style="@style/TabLayoutStyle"
                    app:layout_constraintTop_toBottomOf="@id/vpg1"
                    app:tabTextAppearance="@style/TabLayoutTextStyle"/>

                <androidx.viewpager2.widget.ViewPager2
                    android:id="@+id/vpg2"
                    android:minHeight="@dimen/viewpager_market_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/background_color"
                    app:layout_constraintTop_toBottomOf="@id/tl2"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

    </LinearLayout>
</layout>

I am currently using this lib StickyScrollView, it works as expected but contains minor bugs. I still want to find other stable way. Thanks.

Answer 1

As I had no source code from you, I just started to make an own little project to achieve that. First of all you need to take a CoordinatorLayout as base frame. In that you use an AppBarLayout that is the parent of a CollapsingToolbarLayout and in that you can put your content (here e.g. TextView). The second Toolbar in it needs to be pinned (app:layout_collapseMode="pin") Below that you will continue with the NestedScrollView to have no glitches etc., for a smooth UX.

There you go with your activity_main.xml:

<?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"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="#6200EA"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:title="Collapsing Toolbar">

            <TextView
                android:layout_width="250dp"
                android:layout_height="40dp"
                android:layout_gravity="center|end"
                android:layout_marginBottom="15dp"
                android:scaleType="centerCrop"
                android:text="Trade your Bitcoins here:"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_collapseMode="parallax" />

            <Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />


        </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="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Collapsed Toolbar:

Extended Toolbar:

---

I think now you should have a good inspiration how to design further. It's the same principal. In terms of time I just made a ruff version. In your shown GIF it's just an additional Toolbar at the top, that's normally known as "DarkActionbar" in themes.xml. And the RecyclerView (in your example "Order Book") will be added as a child in NestedScrollView. Cheers!