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.

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 eg 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!