Hello, how can I apply a shadow with a bottom elevation only? Seems `shadow` function applies elevat...

# compose

[nuhkoca]

Hello, how can I apply a shadow with a bottom elevation only? Seems shadow function applies elevation for all edges

[Kirill Grouchnikov]

How would that look like for large elevation values?

[nuhkoca]

for example, 12dp

[nuhkoca]

I found this on SO but it is not working

private fun Modifier.bottomElevation(): Modifier = this.then(Modifier.drawWithContent {
    val paddingPx = 8.dp.toPx()
    clipRect(
        left = 0f,
        top = 0f,
        right = size.width,
        bottom = size.height + paddingPx
    ) {
        [e-mail]()
    }
})

[nuhkoca]

Also shadow(elevation, clip = false) not working, tho

[Oleksandr Balan]

How do you apply a shadow to your element?
If you are using Surface , then clipping all sides except bottom should work (border only for illustration):

Surface(
    elevation = 16.dp,
    modifier = Modifier
        .fillMaxWidth()
        .border(1.dp, Color.Magenta)
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
) {
    Text(
        text = "Allow only bottom shadow",
        modifier = Modifier.padding(16.dp)
    )
}

[nuhkoca]

No, it is a Box, not Surface. For Surface, it works but for Box, it is not. I think shadow is not incorporating properly

[Oleksandr Balan]

In this case clip should be applied before the shadow modifier:

Box(
    modifier = Modifier
        .fillMaxWidth()
        .clip(GenericShape { size, _ ->
            lineTo(size.width, 0f)
            lineTo(size.width, Float.MAX_VALUE)
            lineTo(0f, Float.MAX_VALUE)
        })
        .shadow(16.dp)
        .background(Color.White)
) {
    Text(
        text = "Allow only bottom shadow",
        modifier = Modifier.padding(16.dp)
    )
}

[nuhkoca]

ohh you got me! Thank you for the help, really appreciate it!

[nuhkoca]

@Oleksandr Balan if you don’t mind could you please tell me how clip and shadow are in relation, I still couldn’t figure out

[Oleksandr Balan]

That's not about these in particular, but about modifier order in general. They are applied one after another, that's why you should first clip the drawing area and then draw a shadow

[nuhkoca]

Thanks for explaining!