Shadow not working when using a Toolbar (Lollipop appcompat-v7)

Question

As you know, Elevation doesn't work on Pre-Lollipop devices. Because of this, the default App Bar in appcompat-v7 uses a "pseudo-shadow" texture, as I like to call it, to emulate the shadow. My problem is that I need to use a custom Toolbar. When I use the custom toolbar, that "pseudo-shadow" isn't present. So it just looks flat. Any idea how to add that shadow back? Some people have said on other forums to add a FrameLayout with a foreground of " android:windowContentOverlay" that somehow overlaps the ToolBar. I haven't found any way to get that working, sadly. And for some reason, in my testing, "android:windowContentOverlay" is invisible anyway. Not sure what I'm doing wrong. :/

Here's the Layout XML data for my Toolbar:

<android.support.v7.widget.Toolbar
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

Here's what it looks like with the default AppCompat AppBar: http://imgur.com/0EiE1Vv

Here's what it looks like with a custom ToolBar: http://imgur.com/GGEC6Tq

Edit: With help from alanv, I figured out how to make a shadow beneath the Toolbar. However, it's not the same one that comes by default in AppCompat. It's only a faint shadow, and if I remember correctly it's the same shadow resource that had been used in older versions. I'm having a very hard time trying to find the resource for the default AppCompat bar.

Answer 1

You will put it under the toolbar.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/toolbar_shadow" />
</FrameLayout>

@drawable/toolbar_shadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
    android:startColor="@android:color/transparent"
    android:endColor="#88333333"
    android:angle="90"/>
</shape>

Answer 2

I would recommend you to use two different layouts (one for version 21 and one for all others) and include them in your layout using:

<include layout="@layout/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Example: https://gist.github.com/P0T4T0x/fbd2151bb40d3bd635d0

Answer 3

To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.

<android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"/>
     </android.support.design.widget.AppBarLayout>

To use Google Android Design Support Library enter following into your build.gradle file:

 compile 'com.android.support:design:22.2.0'