https://kotlinlang.org logo
Title
i

Ink

11/05/2021, 11:43 AM
Is it possible to achieve view in background like in the attachment?
c

curioustechizen

11/05/2021, 11:51 AM
Isn't that a ModalBottomSheet?
👍 6
❤️ 1
i

Ink

11/05/2021, 12:19 PM
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, "")
    }
}
b

Brian G

11/05/2021, 12:52 PM
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
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.
c

Colton Idle

11/05/2021, 1:58 PM
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?
c

Chris Sinco [G]

11/05/2021, 8:00 PM
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?
b

Brian G

11/07/2021, 10:56 AM
@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
c

Chris Sinco [G]

11/07/2021, 10:04 PM
Gotcha. Yes that part is needed, to move it up to be one of the first Modifiers.
Do put the snippet here when you get a chance!