https://kotlinlang.org logo
Title
n

nuhkoca

04/25/2022, 9:59 PM
Hello, how can I apply a shadow with a bottom elevation only? Seems
shadow
function applies elevation for all edges
1
k

Kirill Grouchnikov

04/25/2022, 11:07 PM
How would that look like for large elevation values?
n

nuhkoca

04/26/2022, 3:25 AM
for example,
12dp
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
    ) {
        this@drawWithContent.drawContent()
    }
})
Also
shadow(elevation, clip = false)
not working, tho
o

Oleksandr Balan

04/26/2022, 2:53 PM
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)
    )
}
:thank-you: 1
n

nuhkoca

04/26/2022, 3:42 PM
No, it is a
Box
, not
Surface
. For
Surface
, it works but for
Box
, it is not. I think
shadow
is not incorporating properly
o

Oleksandr Balan

04/26/2022, 3:56 PM
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)
    )
}
🚀 1
🎉 1
🔥 1
n

nuhkoca

04/26/2022, 4:00 PM
ohh you got me! Thank you for the help, really appreciate it!
👍 1
@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
o

Oleksandr Balan

04/26/2022, 4:23 PM
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
👍 1
n

nuhkoca

04/26/2022, 8:58 PM
Thanks for explaining!