Material Design - AppCompat toolbar without showing shadow

Question

I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.

the code to set the shadow:

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

The toolbar layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:minHeight="?attr/actionBarSize"
    android:background="#F1F1F1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="0dp"
    android:layout_margin="0dp"
    foreground="?android:windowContentOverlay">

the activity layout:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"     
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent">

    <!-- activity view -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include 
            android:id="@+id/toolbar" 
            layout="@layout/toolbar" />
        <FrameLayout android:id="@+id/fragment_container"
            android:layout_below="@id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:id="@+id/left_drawer"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:divider="#eee"
            android:background="#EEE"
            android:id="@+id/drawer_header">
            <ImageView
                android:id="@+id/user_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:contentDescription="@string/user_icon"
                android:src="@drawable/ic_action_person"
                android:paddingTop="0dp"
                android:paddingLeft="0dp"/>
            <TextView
                    android:id="@+id/userName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/user_icon"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:layout_centerVertical="true"
                    android:textSize="14sp"
                    android:text="@string/not_logged_in"
                    android:paddingTop="0dp"
                    android:paddingBottom="0dp"/>
        </RelativeLayout>
        <ListView
            android:id="@+id/drawer_list"
            android:layout_below="@+id/drawer_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="#eee"
            android:background="#fff"
            android:dividerHeight="0dp" />
    </RelativeLayout>

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

Setting in the style.xml:

<style name="myAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="android:windowContentOverlay">@drawable/drawer_shadow</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

Can anyone help?

thanks!

update 1: with the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.

Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.

Answer 1

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'

Answer 2

Those two are completely different shadows. The vertical one is that of DrawerLayout. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's @null).

When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be @null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.

Note: Use the same gradient but horizontal as the drawer shadow for best results.

Answer 3

You can set the amount of shadow by using the setElevation method. For example:

getSupportActionBar().setElevation(25);

Increasing/decreasing the value passed to setElevation will consequently increase/decrease the presence of the shadow effect.