Jetpack Compose: component with bottom shadow only

Question

I'm struggling with implementing the UI component. I want to achive something like this:

A box with only bottom shadow.

For now I'm able to add elevation but it add's shadow in every direction. This is my current code and it's preview:

@Composable
fun PushNotificationsDisabledInfo(onTap: () -> Unit) {
    Surface(
        elevation = dimensionResource(R.dimen.card_elevation_big),
        shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)),
        modifier = Modifier
            .background(
                color = colorResource(
                    id = R.color.white
                )
            )
            .padding(dimensionResource(R.dimen.grid_2_5x))
    ) {
        Box(
            Modifier
                .clip(shape = RoundedCornerShape(dimensionResource(R.dimen.corner_radius_large)))
                .background(
                    color = colorResource(R.color.white)
                )
                .clickable(
                    onClick = { onTap() },
                    interactionSource = remember { MutableInteractionSource() },
                    indication = rememberRipple(bounded = true),
                )
        ) {
            Row(Modifier.padding(dimensionResource(R.dimen.grid_2x))) {
                Image(
                    painter = painterResource(R.drawable.ic_error_big),
                    contentDescription = stringResource(R.string.empty_content_description),
                    modifier = Modifier.size(dimensionResource(R.dimen.grid_4x))
                )
                Spacer(modifier = Modifier.width(dimensionResource(R.dimen.grid_2x)))
                Column {
                    Text(
                        text = stringResource(R.string.notifications_settings_push_notifications_disabled_title),
                        style = SiemensTextStyle.caption1,
                        color = colorResource(R.color.red)
                    )
                    Text(
                        text = stringResource(R.string.notifications_settings_push_notifications_disabled_message),
                        style = SiemensTextStyle.caption2,
                        color = colorResource(R.color.black)
                    )
                }
            }
        }
    }
}

Any ideas how to implement only bottom shadow using Compose?

user_8372386 · Answer

Copy-paste the following extension & use it in your Card's Modifier:

private fun Modifier.bottomElevation(): Modifier = this.then(Modifier.drawWithContent {
    val paddingPx = 8.dp.toPx()
    clipRect(
        left = 0f,
        top = 0f,
        right = size.width,
        bottom = size.height + paddingPx
    ) {
        this@drawWithContent.drawContent()
    }
})

Jetpack Compose: component with bottom shadow only

1 Answers