Have layout with fixed View top of screen with collapsable view underneath

Question

I'm trying to create a layout with the following format:

The ViewPager contains a TabLayout each with a Fragment that contains a RecyclerView. I haven't been able to create a layout that works (with everything I've tried either both the red and blue areas scroll or they both stay fixed). Here is my current layout, which scrolls both the red and blue areas. Any ideas on how to achieve my desired layout?

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/fragment_video_appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:fitsSystemWindows="true">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/fragment_video_info_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <android.support.v7.widget.AppCompatImageView
                android:id="@+id/fragment_video_imageview"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@android:color/darker_gray" />

            <TextView
                android:id="@+id/fragment_video_timelength_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingStart="5dp"
                android:paddingEnd="5dp"
                android:paddingTop="3dp"
                android:paddingBottom="3dp"
                android:textSize="12sp"
                android:textColor="@color/white"
                android:background="@color/dimfilter"
                app:layout_constraintBottom_toBottomOf="@+id/fragment_video_imageview"
                app:layout_constraintEnd_toEndOf="parent"
                tools:text="03:45"/>

        </android.support.constraint.ConstraintLayout>

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/fragment_user_collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:background="@color/white">

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

                <TextView
                    android:id="@+id/fragment_video_title_textview"
                    style="@style/TextAppearance.AppCompat.Light.SearchResult.Subtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="16dp"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:textStyle="bold"
                    tools:text="funny videos" />

                <TextView
                    android:id="@+id/fragment_video_plays_textview"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:textSize="12sp"
                    tools:text="1.7k plays ⋅ 4 years ago" />

                <TextView
                    android:id="@+id/fragment_video_description_textview"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginTop="10dp"
                    android:textColor="@color/colorPrimaryText"
                    android:textSize="13sp"
                    tools:text="funny videos compilation"/>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="8dp"
                    android:background="@color/mediumLightGray"/>

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp">

                    <include layout="@layout/item_user" />
                </FrameLayout>
            </LinearLayout>

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_video_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/fragment_video_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/mediumLightGray"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabTextColor="@color/darkMediumGray"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_collapseMode="pin"/>

    </android.support.v4.view.ViewPager>



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

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

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

Answer 1

Similar problem and solution found here: https://stackoverflow.com/a/44710307/7648952

My modified layout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/fragment_video_appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="200dp"
                android:orientation="vertical"
                app:layout_collapseMode="parallax">

                <TextView
                    android:id="@+id/fragment_video_title_textview"
                    style="@style/TextAppearance.AppCompat.Light.SearchResult.Subtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="16dp"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:textStyle="bold"
                    tools:text="funny videos" />

                <TextView
                    android:id="@+id/fragment_video_plays_textview"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:textSize="12sp"
                    tools:text="1.7k plays ⋅ 4 years ago" />

                <TextView
                    android:id="@+id/fragment_video_description_textview"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginTop="10dp"
                    android:textColor="@color/colorPrimaryText"
                    android:textSize="13sp"
                    tools:text="funny videos compilation"/>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="8dp"
                    android:background="@color/mediumLightGray"/>

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="16dp"
                    android:layout_marginEnd="16dp">

                    <include layout="@layout/item_user" />
                </FrameLayout>
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:contentInsetStart="0dp">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/fragment_video_info_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/fragment_video_imageview"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:scaleType="fitXY"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:srcCompat="@android:color/darker_gray" />

                    <TextView
                        android:id="@+id/fragment_video_timelength_textview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingStart="5dp"
                        android:paddingEnd="5dp"
                        android:paddingTop="3dp"
                        android:paddingBottom="3dp"
                        android:textSize="12sp"
                        android:textColor="@color/white"
                        android:background="@color/dimfilter"
                        app:layout_constraintBottom_toBottomOf="@+id/fragment_video_imageview"
                        app:layout_constraintEnd_toEndOf="parent"
                        tools:text="03:45"/>

                </android.support.constraint.ConstraintLayout>

            </android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/fragment_video_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/fragment_video_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/mediumLightGray"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabTextColor="@color/darkMediumGray"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:layout_collapseMode="pin"/>

    </android.support.v4.view.ViewPager>

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

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

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