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

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

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

Advertisement

Answer