How to achieve this shadow on top of a bottomsheet-like view

Question

I need to add this shadow on top of my view like shown in theis Figma design:

I think I've tried everything:

Using BottomSheetDialog and BottomSheetFragment were not useful as the background should be scrollable and I couldn't get this to be so. Apart from that couldn't add any sort of shadow/elevation via styling.
Using a CardView as a container didn't help either because adding just normal elevation always shows on the bottom of a view - because in the world of Android the sun probably always shines from above. Strange concept to force upon a virtual design - meaning, why isn't it easily possible to determine a shadows direction??-
Tried generating shadow drawable using this suggestion but it's obviously not ment for a view like a bottom sheet which ONLY needs a shadow on top. The result looked like this:

Should I ask my designer to generate shadow drawables like we did in the old days of web development before CSS could do anything?

PLEASE any direction would help!

Elevation in Android is always on the bottom. Not on the top as I need it here. — Ambran, Oct 20 '22 at 10:20
Elevation creates shadow all around the view, with bottom being the most prominent but not only there. — TheLibrarian, Oct 20 '22 at 11:00
The shadow I need on top is the shadow I can only get on bottom using elevation which is very minor and thus negligible. I suggest you try that and see for yourself. Anyway, found a way to do that. Refer to my answer. — Ambran, Oct 20 '22 at 11:38

score 1 · Accepted Answer · answered Oct 20 '22 at 10:24

Ok, after sitting on this for the most part of two days, and taking the time to finally post a question here about it, I suddenly found the answer.

I just expanded it a bit with a double-edged gradient:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Main top Shadow -->
    <item>
        <shape>
            <padding
                android:top="20dp" />
            <gradient
                android:angle="90"
                android:centerColor="#20000000"
                android:endColor="@android:color/transparent"
                android:startColor="#000000" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- Secondary top Shadow -->
    <item>
        <shape>
            <padding
                android:top="8dp" />
            <gradient
                android:angle="90"
                android:centerColor="#90000000"
                android:endColor="@android:color/transparent"
                android:startColor="#000000" />
            <corners android:radius="12dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/white" />
            <corners
                android:topLeftRadius="12dp"
                android:topRightRadius="12dp" />
        </shape>
    </item>
</layer-list>

The result:

How to achieve this shadow on top of a bottomsheet-like view

1 Answers1

Linked