Cast shadow on top of LinearLayout using android:elevation

Question

I have this LinearLayout that is going to be placed on the bottom of an activity layout. I want this LinearLayout to have a 4dp elevation, just like the top toolbar should have, however, since android:elevation places the shadow below the ui component and this specific component (linearLayout) is going to be on the bottom of the screen, I won't see any elevation at all..

This is my LinearLayout code, and an image of it with the default elevation implemented:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3"
    android:background="@android:color/transparent"
    android:orientation="horizontal"
    android:elevation="4dp"
    android:layout_alignParentBottom="true">

    <ImageButton
        android:id="@+id/playButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_play"
        style="?android:attr/borderlessButtonStyle" />

    <ImageButton
        android:id="@+id/stopButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_stop"
        style="?android:attr/borderlessButtonStyle" />

    <ImageButton
        android:id="@+id/bookmarkButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_bookmark"
        style="?android:attr/borderlessButtonStyle" />

</LinearLayout>

Is there a way, using elevation to place a shadow on top of the ui component? Thanks in advance!

Answer 1

You can't theoretically do it with android:elevation, in the sense that you can't choose the direction where the shadow is going to be cast.

There are two solutions.

1. Drawables

You could, for instance, put an ImageView right above your layout and set android:src="@drawable/shadow". This should be a vertical GradientDrawable defined in XML, as explained here.

2. Workaround

While most of the shadow is actually below the view, a subtle shadow is also above. A workaround might be using a very high value for elevation, like 40dp: the bottom part is going to be hidden due to your layout, while the top is going to be expanded and look like a common shadow.

In either case, you do not have control over the elevation value in dp, in the sense that you can't be sure your shadow is equivalent to the one cast by android:elevation=4dp.