Hi ! does any one knows how to do a drop shadow i...
# compose-android
c
Hi ! does any one knows how to do a drop shadow in a Jetpack Compose Icon ? like Share
👀 1
a
Try using 'shadow' modifier, probably this is what you are looking for?
c
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:
Copy code
@Composable
private fun DropShadowIcon() = Icon(
    modifier = Modifier.shadow(elevation = 3.dp),
    imageVector = Icons.Filled.Share,
    contentDescription = "share icon",
    tint = Color.White,
)
o
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.
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 😄
Copy code
@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.
c
thanks @Oleksandr Balan!! 😄 I'm going to try it
308 Views