Why jetpack compose elevation clip my shadow?

user_3613285 0
Viewed 14648

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 enter image description here

@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()
}
android-jetpack-compose android
2 Answers

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

@Composable
@Preview
fun DiscoverItemPreview() {
    Column{
    DiscoverItem()
    Spacer(modifier = Modifier.height(20.dp))
    }
}

And about colorful shadow, compose min sdk is Android Lollpop and skia version for lollipop doesnot supports colorful shadow/elevation. Leland Richardson had talked about this issue in his youtube video on Compose dogfooding. here

user_47859570

I use surface to wrap the shadowed card and it gives me expected result.

 Surface(
    elevation = 4.dp,
    color = MaterialTheme.colors.surface,
    shape = Shapes.medium,
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .animateContentSize(
                animationSpec = tween(
                    durationMillis = 300,
                    easing = LinearOutSlowInEasing
                )
            ),
        elevation = 8.dp,
        shape = Shapes.medium,
        onClick = {
            isExpanded = !isExpanded
        }

    ) {}}

enter image description here

user_138260480
Related