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: https://i.stack.imgur.com/ELqA7.jpg

Here's what it looks like with a custom ToolBar: https://i.stack.imgur.com/o29Hu.jpg

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.

The foreground should be set using android:foreground="?android:attr/windowContentOverlay". The FrameLayout should be below your Toolbar and should contain your app content. — alanv, Oct 29 '14 at 22:03
Thanks for the tip. It actually *did* create a shadow, though it is quite faint. Not quite what I'm looking for, sadly. Maybe there's another resource than windowContentOverlay that does this? I can't seem to find anything. — Michael, Oct 30 '14 at 04:20
@Phascinate did you find proper resources for both overlays, the toolbar and content below? It looks like these are two different overlays and I'm looking for resources to achieve result similar to the stock toolbar. — tomrozb, Dec 01 '14 at 13:51
@tomrozb No, I unfortunately have not. If you find anything, please tell me. :) Likewise, I'll tell you if I find anything. — Michael, Dec 04 '14 at 14:20
What's the "popupTheme" ? Also, is there a way to easily customize the shadow size/strength? — android developer, Dec 11 '14 at 09:26
possible duplicate of [No shadow by default on Toolbar?](http://stackoverflow.com/questions/26575197/no-shadow-by-default-on-toolbar) — Ben Pearson, Dec 18 '14 at 13:03

score 1 · Answer 1 · answered Feb 23 '15 at 12:19

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>

score 1 · Answer 2 · answered Mar 05 '15 at 21:24

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

Michal · Answer 3 · 2015-09-28T08:58:54.173

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'

score 0 · Answer 4 · answered Dec 23 '14 at 20:21

I would just have a custom XML shadow, with an ImageView

    <ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/shadow"
android:layout_height="@dimen/shadow_height"
android:layout_width="match_parent"
android:src="@drawable/shadow_shape"
    />

and its image resource shadow_shape.xml in your drawable folder:

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

You can get pretty nice results by moduling @dimen/shadow_height and @color/shadow according to your needs (the darker @color/shadow & the taller the view, the higher your fake elevation). It's not native, but very customizable.

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

4 Answers4