CollapsingToolbar - overlap with correct anchoring

Question

I'm trying to create a CollapsingToolbarLayout in which the there is a movie poster overlapping the backdrop. To achieve this I'm enabling behavior_overlapTop="67dp" but this results in a strange scrolling behavior.

When scrolling, my views are pushed away from their overlapping position. How do I make them stay in place?

<?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:fitsSystemWindows="true"
    tools:context=".MediaItemBaseActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="1dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar"
            app:scrimAnimationDuration="250"
            app:scrimVisibleHeightTrigger="100dp">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="20dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_overlapTop="0dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".MediaItemBaseActivity"
        tools:showIn="@layout/activity_media_item_base">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingEnd="16dp"
            android:paddingStart="16dp">

            <ImageView
                android:id="@+id/poster"
                android:layout_width="134dp"
                android:layout_height="201dp"
                android:layout_gravity="top|start"
                android:layout_marginTop="-10dp"
                android:elevation="10dp"
                app:layout_anchor="@id/ll_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/surtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:textAllCaps="false"
                android:textSize="14sp"
                app:layout_constraintBottom_toTopOf="@+id/title"
                app:layout_constraintStart_toStartOf="@+id/title" />

            <TextView
                android:id="@+id/title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="96dp"
                android:ellipsize="end"
                android:maxEms="9"
                android:maxLines="3"
                android:singleLine="false"
                android:textAllCaps="false"
                android:textColor="@android:color/black"
                android:textSize="20sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/poster"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:textAllCaps="false"
                android:textSize="14sp"
                app:layout_constraintStart_toStartOf="@+id/surtitle"
                app:layout_constraintTop_toBottomOf="@+id/title" />

            <TextView
                android:id="@+id/body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/text_margin"
                android:layout_marginTop="8dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/poster" />

            <TextView
                android:id="@+id/credit_title_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/body" />

            <TextView
                android:id="@+id/credit_name_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                app:layout_constraintStart_toEndOf="@id/credit_title_1"
                app:layout_constraintTop_toTopOf="@id/credit_title_1" />

            <TextView
                android:id="@+id/credit_title_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/credit_name_1" />

            <TextView
                android:id="@+id/credit_name_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="@+id/credit_name_1"
                app:layout_constraintTop_toTopOf="@id/credit_title_2" />

            <TextView
                android:id="@+id/credit_title_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/credit_name_2" />

            <TextView
                android:id="@+id/credit_name_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="@+id/credit_name_2"
                app:layout_constraintTop_toTopOf="@id/credit_title_3" />

        </android.support.constraint.ConstraintLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@drawable/ic_add_black_24dp" />

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

Answer 1

What is happening here is that both the CollapsingToolbar and the NestedScrollView is getting scrolled which is obvious. To get the effect you probably want(similar to FAB but with the view visible even when collapsed), you need to extend the CoordinatorLayout.Behaiour class to make your own behaviour. Setting behavior_overlapTop="67dp" wont do anything except what it seems to be doing right now.