CollapsingToolbarLayout flickers with overlapped content

Question

Background

I'm trying to do a collapsing toolbar with overlapped content using Android Design Support Library.

Its similar to Google Play Store Movie page where the movie poster slightly overlaps the parallax image in the collapsing toolbar above.

Problem

I've encountered an issue when scrolling up, the movie poster goes behind the parallax image, then redraws itself ontop. Causing an image flicker.

Animated gif of the issue

Code

Below is the layout used and its referenced from Google's SupportDesignDemo.

https://android.googlesource.com/platform/development/+/master/samples/SupportDesignDemos/res/layout/design_appbar_toolbar_parallax_overlap.xml

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_app_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/decelerate_interpolator"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/backdrop"
                android:scaleType="centerCrop"/>

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

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

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

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                                                xmlns:app="http://schemas.android.com/apk/res-auto"
                                                android:layout_width="match_parent"
                                                android:layout_height="match_parent"
                                                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                                                app:behavior_overlapTop="50dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:orientation="vertical">

            <ImageView android:layout_width="150dp"
                       android:layout_height="220dp"
                       android:padding="15dp"
                       android:src="@drawable/poster"
                       android:layout_marginLeft="16dp"/>

            <TextView
                android:id="@+id/textview_dialogue"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

Notes

Downloaded "API Demos for Android", tried "AppBar/Parallax Overlapping content" demo and it seems to work fine without the flicker issue.

Answer 1

Found the answer! It's simple. Adding elevation to the AppBarLayout will fix the flicker.

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_height="192dp"
    android:layout_width="match_parent"
    app:elevation="1dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">