Why there is no shadow under AppBarLayout despite having elevation

Question

Recently, I start to use CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout.

However, I realize the shadow below toolbar is gone after I introduce such changes.

This is my new code

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"

            app:layout_scrollFlags="scroll|enterAlways|snap"

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary">

            <!-- Toolbar -->
            <include layout="@layout/toolbar"/>

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

    <!-- http://stackoverflow.com/questions/14171471/remove-vertical-padding-from-horizontal-progressbar -->
    <!-- http://stackoverflow.com/questions/32464749/horizontal-progress-bar-is-not-visible-if-placed-above-toolbar-for-android-5 -->
    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:id="@+id/progress_bar"
        android:layout_gravity="top"
        android:layout_marginBottom="0dp"
        android:layout_marginTop="-4dp"
        android:elevation="4dp"
        android:max="100" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="?attr/headerShadow"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

But, shadow is not seen under Toolbar.

---

If I compare against my code before CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="4dp">

        <!-- Toolbar -->
        <include layout="@layout/toolbar"/>

        <!-- http://stackoverflow.com/questions/14171471/remove-vertical-padding-from-horizontal-progressbar -->
        <!-- http://stackoverflow.com/questions/32464749/horizontal-progress-bar-is-not-visible-if-placed-above-toolbar-for-android-5 -->
        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:id="@+id/progress_bar"
            android:layout_gravity="top"
            android:layout_marginBottom="0dp"
            android:layout_marginTop="-4dp"
            android:elevation="4dp"
            android:max="100" />

    </FrameLayout>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="?attr/headerShadow">
    </FrameLayout>
</LinearLayout>

I can see the shadow under Toolbar.

Is there anything I had missed?