Cast shadow on top of LinearLayout using android:e

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

Try this i am unable to set background through xml then i tried the programmatic way to solve that and i work perfectly refer this if facing problem on show shadow in Linear Layout

lprofile.setBackgroundResource(R.drawable.background_with_shadow);

lprofile is my ref of Linear layout and background_with_shadow is xml for applying shadow i hope i will for ur requirmement...thank u..

Answer 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>

Answer 3

Add this code above of view in which you want top elevation or add android:layout_marginTop="-4dp" and add below of above view

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="0.01dp"
    android:layout_below="@+id/scrollbar"
    app:cardBackgroundColor="@android:color/transparent"
    app:cardCornerRadius="0dp"
    app:cardElevation="@dimen/dp_4" />

Answer 4

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.