Jetpack Compose shadow over LazyColumn

Question

I'm trying to draw this shadow below list header, to give an illusion of LazyColumn items scrolling below (or behind) the header:

I tried:

1. using Modifier.shadow() but it does not yield desired result.
2. drawing a Box with gradient background, which does what I want, but get overdrawn with LazyColumn elements.

To counter this drawing over my gradient I tried the following:

1. putting Box after LazyColumn,
2. setting Modifier.zIndex(10f) to Box.

Of course, none of that worked. Immediately after LazyColumn elements were drawn, gradient disappeared.

What am I missing?

Answer 1

Have you tried a Surface with elevation?

From docs https://developer.android.com/jetpack/compose/designsystems/material#elevation-overlays

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { 

// TODO - Put your list header here.

 }