How to fix a layout position on top when scrolling

Question

I have a layout (or tab layout) in the middle of the activity and I want when the user scrolls and this layout reach the top, it stays at the top (replace the toolbar) and rest of the content keep scrolling. For example, my page looks like this:

________________________________
|        custom toolbar        |
|------------------------------|
|                              |
|         some content         |
|                              |
|------------------------------|
|    layout (or tab layout)    |
|------------------------------|
|                              |
|     rest of the contents     |
|                              |
|                              |
|                              |
|                              |
|______________________________|

And I want it to be like this after scrolling:

________________________________
|     layout (or tab layout)   |
|------------------------------|
|                              |
|     rest of the contents     |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|______________________________|

Kind of like the 'My apps & games' page in Play Store app.

Answer 1

1. Use CoordinatorLayout as a root layout.

2. Add AppBarLayout and NestedScrollView as direct child of CoordinatorLayout

    AppBarLayout     -> Toolbar + Some content + TabLayout
    NestedScrollView -> Rest of the contents

3. Inside AppBarLaout, add child CollapsingToolbarLayout and TabLayout. Keep Toolbar and ImageView into CollapsingToolbarLayout.

   <AppBarLaout>
       <CollapsingToolbarLayout>
           <ImageView /> 
           <Toolbar />
       </CollapsingToolbarLayout>   

       <TabLayout />
   </AppBarLaout>

4. Add attribute app:layout_scrollFlags="scroll|exitUntilCollapsed" to CollapsingToolbarLayout and attribute app:layout_scrollFlags="scroll|enterAlways" to Toolbar for collapsing effect.

5. Add attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" to NestedScrollView for your content scrolling behavior.

Your final layout structure should look like:

<CoordinatorLayout>

    <AppBarLaout>
       <CollapsingToolbarLayout>
           <ImageView /> 
           <Toolbar />
       </CollapsingToolbarLayout>   

       <TabLayout />
    </AppBarLaout>

    <NestedScrollView>

        <!-- Your content -->

    </NestedScrollView>

<CoordinatorLayout>

Here is an working code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="206dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/image_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your content -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Hope this will help~