How do I add a shadow beneath my action bar in Android?

Question

I'm trying to get a shadow to appear beneath my action bar, but for some reason the shadow continually appears and begins at the very top of the screen, instead of beneath the action bar. I'm using a CustomView android.support.v7.widget.Toolbar action bar widget in each of my xml layout files. How can I get the shadow to properly appear beneath this action bar instead of at the top? Can I set some kind of divider equal to the height of this custom view before the shadow appears? Can we do something like set the height of the gradient to 50dp but only show the gradient in the last 5-10% of that height?

My theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/white</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#000</item>

    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">@color/teal</item>

    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight & colorSwitchThumbNormal. -->

    <item name="android:textColorSecondary">#d7d7d7</item>

    <item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>

</style>

Shadow drawable:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="4dp" />
    <gradient
        android:angle="270"
        android:endColor="@android:color/transparent"
        android:startColor="@color/grey" />
</shape>

Toolbar:

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"
    android:layout_height="50dp"
    android:minHeight="30dp"
    android:layout_width="match_parent"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:background="@color/white">

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/actionbar_title_r"
        android:id="@+id/ActionBarTitle" />

</android.support.v7.widget.Toolbar>

Answer 1

Toolbar will have a shadow only in devices running on API 21 or higher. In order to achieve this effect you can add the property android:elevation="4dp" And it will work fine. Hope this helps

Answer 2

You can try several dp for elevation on the material appBar layout and see the degree of effect it gives. Then you decide how much do you give it.

in the appBar, android:elevation = "1dp"

play with 2dp, 3dp,4dp and choose whats right for you.