Shadow resulting from elevation showing with circle drawable as background but not with rectangle

Viewed 735

I'm trying to use a View's elevation property to cast a shadow. It works fine when the background is a circle or a rounded rectangle drawable. However, if I use a color or a rectangle drawable as a background the shadow doesn't show.

Simply changing the radius of the rounded rectangle to zero, causes the shadow to disappear. I have tried solutions to similar issues such as adding padding and margin. I added both:

android:clipChildren="false"
android:clipToPadding="false"

to the parent View but that didn't fix the problem either.

I am using the simplest shapes possible:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent" />
</shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="@color/colorAccent" />
</shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorAccent" />
</shape>

And here's the very simple layout where I'm testing this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@drawable/rectangle"
android:elevation="40dp"/>
</LinearLayout>

I know there are other ways of achieving shadows in Android such as using 9-patch images, but elevation is a much simpler way and I'm hoping to make it work using only that.

These are the previews changing only the background drawable.

https://i.imgur.com/CtVhI8m.png https://i.imgur.com/T2Ozcz7.png

This is the end result I'm going for:

https://i.imgur.com/irIMNAF.png

But I mostly just want to figure out why the shadow is not showing with a color or rectangular drawable as background.

2 Answers

When I use a solid color background (e.g. android:background="#fff") or a rectangle shape without rounded corners and run the app, I see a shadow.

However, I have to actually run the app. Just looking at the Android Studio layout preview doesn't show the shadow unless I use a background drawable with rounded corners. So I suspect you're just looking at a bug (or feature?) of the layout preview.

In my case helped wrap my shape with layer-list like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/avatar_ripple">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/black_light" />
        <stroke
            android:width="@dimen/stroke_large"
            android:color="@color/gray" />
    </shape>
</item>

Then you can simple apply elevation to your view with your drawable as background, but there is bug that you won't see the shadow until you launch the app.

Particularly helped this answer: https://stackoverflow.com/a/60424218/16006976

Related