I have this box that has a shape but the elevation shadow does not seem to be clipping to it since it still looks rectangular. Why is this happening?
Box(
modifier = Modifier
.scale(scale)
.alpha(alpha)
.blur(1.dp)
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(25.dp)
)
) {
Image(
painter = painterResource(id = R.drawable.placeholder),
contentScale = ContentScale.Crop,
modifier = Modifier
.size(width = 100.dp, height = 200.dp)
.clip(RoundedCornerShape(25.dp)),
contentDescription = null
)
}
>Solution :
The issue with the elevation shadow not being clipped to the rounded corners of the Box may be due to the fact that the Box is being clipped after the shadow is applied.
To fix this, try applying the shadow after the clip, like so:
Box(
modifier = Modifier
.scale(scale)
.alpha(alpha)
.blur(1.dp)
.clip(RoundedCornerShape(25.dp))
.shadow(
elevation = 10.dp,
shape = RoundedCornerShape(25.dp)
)
) {
Image(
painter = painterResource(id = R.drawable.placeholder),
contentScale = ContentScale.Crop,
modifier = Modifier
.size(width = 100.dp, height = 200.dp),
contentDescription = null
)
}
By first clipping the Box and then applying the shadow with the same RoundedCornerShape, the elevation should now be clipped to the rounded corners of the Box, creating the desired effect.