Hi ! does any one knows how to do a drop shadow in a Jetpack Compose Icon ? like Share

# compose-android

[Christian Ricardo]

Hi !

does any one knows how to do a drop shadow in a Jetpack Compose Icon ?
like Share

[Artem Svetlovsky]

Try using 'shadow' modifier, probably this is what you are looking for?

[Christian Ricardo]

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:

@Composable
private fun DropShadowIcon() = Icon(
    modifier = Modifier.shadow(elevation = 3.dp),
    imageVector = Icons.Filled.Share,
    contentDescription = "share icon",
    tint = Color.White,
)

[Oleksandr Balan]

I did not tried it, but you could transform the icon to the bitmap, and the get its shape with a pathway library:
https://github.com/romainguy/pathway#paths-from-images

Then the resulted shape you could pass to the "shadow" modifier.

[Oleksandr Balan]

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 😄

@Preview
@Composable
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()) }
    }

    Icon(
        painter = painterResource(iconRes),
        contentDescription = null,
        tint = Color.White,
        modifier = Modifier
            .padding(16.dp)
            .shadow(
                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]

thanks @Oleksandr Balan!! 😄 I'm going to try it