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!

Solution 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.

Solution 2

use like as;

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="205dp"
    android:background="@color/white"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="-5dp"
        android:background="@color/white"
        android:elevation="3dp"
        android:paddingTop="5dp">

        // CHILD VIEWS
    </RelativeLayout>
</LinearLayout>

Comments

[validcat]

Also the workaround solution works perfect for me. Thanks!

[Bundeeteddee]

It seems like the workaround solution is great for higher end devices. For lower end devices on something like jelly bean, elevation causes the view group to really elevate (based on how much elevation value you set), with the shadow that it generated to push the view group inwards (shadow seem to always be completely visible). At least this is my observation.

[Shredder2794]

Negative margins are not officially supported.

[The Finest Artist]

Negative margins are officially supported.

[rupinderjeet]

What/Where is R.drawable.background_with_shadow?

[Nathan F.]

Supported margins are officially negative.