Christian Ricardo

04/21/2023, 11:55 PM
Hi ! does any one knows how to do a drop shadow in a Jetpack Compose Icon ? like Share

Artem Svetlovsky

04/23/2023, 11:18 AM
Try using 'shadow' modifier, probably this is what you are looking for?

Christian Ricardo

04/24/2023, 1:05 AM
Hi @Artem Svetlovsky thanks for the answer the problem is that you need a shape for that the default is a rectangle the image is the result of this code:
private fun DropShadowIcon() = Icon(
    modifier = Modifier.shadow(elevation = 3.dp),
    imageVector = Icons.Filled.Share,
    contentDescription = "share icon",
    tint = Color.White,

Oleksandr Balan

04/24/2023, 7:26 AM
I did not tried it, but you could transform the icon to the bitmap, and the get its shape with a pathway library: Then the resulted shape you could pass to the "shadow" modifier.
I was curios how it will work, so I have tried steps from above and it creates a small subtle shadow that looks fine as for me 😄
fun IconShadow() {
    val context = LocalContext.current
    val iconRes = R.drawable.ic_share
    val shape = remember(context, iconRes) {
        val drawable = ContextCompat.getDrawable(context, iconRes)
        val path = requireNotNull(drawable).toBitmap().toPath()
        GenericShape { _, _ -> addPath(path.asComposePath()) }

        painter = painterResource(iconRes),
        contentDescription = null,
        tint = Color.White,
        modifier = Modifier
                elevation = 3.dp,
                shape = shape,
However I am not sure how to properly convert ImageVector to Bitmap, so I did it in the “old” way through the drawable.

Christian Ricardo

05/04/2023, 3:24 PM
thanks @Oleksandr Balan!! 😄 I'm going to try it