Why jetpack compose elevation clip my shadow?

Question

I have a problem with jetpack compose elevation render. I'm trying to add elevation on Surface but my UI seems to with clipped shadow. Also, how can I add a colorful shadow on my Surface?

See the below on the screenshot

@Composable
fun DiscoverItem() {
    Surface(
        contentColor = Color(0xFFFFFFFF),
        modifier = Modifier.preferredWidthIn(min = 145.dp).preferredHeight(56.dp),
        shape = CircleShape,
        elevation = 8.dp,
    ) {
        Row(
            modifier = Modifier.fillMaxSize().padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Surface(
                modifier = Modifier.preferredSize(40.dp),
                shape = CircleShape,
                color = Color(0xFFFFC3D8)
            ) {
                Image(
                    imageResource(R.drawable.pin_icon),
                    modifier = Modifier.size(width = 18.dp, height = 24.dp),
                    contentScale = ContentScale.Fit
                )
            }
            Spacer(modifier = Modifier.padding(start = 10.dp))
            Text(
                "YOUR AREA",
                style = MaterialTheme.typography.body2,
                color = Color(0xFFFC1055)
            )
        }
    }
}

@Composable
@Preview
fun DiscoverItemPreview() {
    DiscoverItem()
}

Answer 1

You don't have enough content on bottom of your layout. You can add spacer to view your shadow.