Is it possible to achieve view in background like in the attachment?

# compose

[Ink]

Is it possible to achieve view in background like in the attachment?

[curioustechizen]

Isn't that a ModalBottomSheet?

[Ink]

My bottom sheet has some additional padding (that between light and the darkest grey) What's wrong?

@Composable
fun AddPhotoBottomSheet() {
    Column(
        modifier = Modifier
            .background(MaterialTheme.colors.onBackground)
            .fillMaxWidth()
            .wrapContentHeight()
            .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            .shadow(
                elevation = 3.dp,
                shape = RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp)
            )
            .padding(bottom = 15.dp)

    ) {
        AddPhotoFromItem(R.drawable.ic_add_photo_from_gallery, "")
        AddPhotoFromItem(R.drawable.ic_add_photo_from_camera, "")
    }
}

[Brian G]

Modifiers are applied in order, visually they appear nested. Your code says to apply a background, and then INSIDE that background you are adding a shadow.

You probably want to add your shadow first, so it appears outside the background

[Brian G]

This is confusing coming from Web, where shadows don't affect layout. In Compose UI, shadows add some padding to make room for the shadow. I was also very surprised by this! And I strongly prefer the way it works in CSS.

[Colton Idle]

BottomSheet components in Compose also come with their own surface (as far as I can tell, because I had a similar issue to this). Can you show the BottomSheet code that is actually hosting AddPhotoBottomSheet?

[Chris Sinco [G]]

In Compose UI, shadows add some padding to make room for the shadow.

Hmm that shouldn’t be happening. Do you have a code snippet + Preview that demonstrates this?

[Brian G]

@Chris Sinco [G] I will have to dig into it when I get a chance. I fixed my code by moving the shadow before any other modifiers (size, borders, etc.), which makes more sense anyway

[Chris Sinco [G]]

Gotcha. Yes that part is needed, to move it up to be one of the first Modifiers.

[Chris Sinco [G]]

Do put the snippet here when you get a chance!