How to make one of child view of nestedscrollview to sticky header?

Question

Below is my code snipet.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinate"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity">    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />

    <include
        android:id="@+id/retryLayoutNoInternet"
        layout="@layout/no_internet_retry_layout"
        android:visibility="gone" />
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

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

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

    </android.support.design.widget.AppBarLayout>
<include
        android:id="@+id/content"
        layout="@layout/content_movie" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom"
        app:layout_collapseMode="pin"
        app:theme="@style/ThemeOverlay.AppCompat.Light">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="8dp"
            android:minHeight="?android:attr/actionBarSize"
            android:orientation="vertical">

            <TextView
                android:id="@+id/movieTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" />

            <TextView
                android:id="@+id/movieOrignalTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="subtitle"
                android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

And below is content_movie.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:id="@+id/content_movie"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity"
    tools:showIn="@layout/activity_movie">

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

        <include layout="@layout/overview" />

        <include layout="@layout/cast" />

        <include layout="@layout/facts" />


<!-- Below tablayout I want to work as a sticky header -->
        <!--<android.support.design.widget.TabLayout-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="100dp"-->
        <!--android:background="@color/colorPrimary" />--> </LinearLayout>
</android.support.v4.widget.NestedScrollView>

The commented tablayout should work as a sticky header(meaning it should not scroll when it reaches to top while scrolling).How to achive this effect using the coordinate layout?OR In any other way.Can we use custom behavior or something?

Answer 1

All you have to do is move the TabLayout to the AppBarLayout.

Since the TabLayout doesn't have scroll flags defined, it will stick to the top of the layout when you scroll.

When you do this, the app bar height needs to be changed to wrap_content and the 400dp height needs to go to the CollapsingToolbarLayout.

I just took the AppBarLayout snippet from your entire XML to demonstrate:

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

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

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

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/colorPrimary" />

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