How to add a shadow / border / elevation to an icon in Jetpack Compose

user_12871582 0
Viewed 2859

I would like to add a shadow to my icon in Jetpack compose, so that the image & text have a (roughly) similar shadow.

Dummy-Image from https://www.123rf.com/photo_111707392_big-data-vector-icon-isolated-on-transparent-background-big-data-transparency-logo-concept.html enter image description here

Text(
    text = "HAS SHADOW",
    style = MaterialTheme.typography.body2.copy(
        shadow =  Shadow(
            color = Color(0x4c000000),
            offset = Offset(2f, 2f),
            blurRadius = 7f
        )
    ),
)

Text(
    text = "HAS NO SHADOW",
    style = MaterialTheme.typography.body2
)

Please note: As you can see above, the icon is partly transparent and i want to keep it that way -> solutions like "Wrap it in a FloatingActionButton" won't work

Can i do this in compose or do i have to ask my designer to add a shadow?

android-jetpack-compose android
1 Answers

For shadow and elevation

Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)

For border

Modifier.border(border: BorderStroke, shape: Shape)

Also, check the link for other border function variants.

user_47775240
Related