Hi, With using the ModalBottomSheet in material 3....

# compose

[Simen Sogard]

Hi, With using the ModalBottomSheet in material 3. Is it possible to have buttons/title in the top rounded up area?
Atm, I don't seem to be able to add anything in the area above the black line in my example, but I would like to have abort/save buttons and a title as close up to the edge as possible

[Joel Denke]

If I remember correct, remove dragHandle and potentially using negative padding if need to put it inside the corner cut shape.

[Joel Denke]

Another solution would be to remove contentPadding and set shape to Rectangle, and create a shape inside the bottomsheet, or make transparent bottomsheet surface, and do same shape within, thats behind your content.
I do not recommend doing transparent though, as will have odd animation.

[Joel Denke]

Can always look at source code here https://androidx.tech/artifacts/compose.material3/material3-android/1.2.0-rc01-sour[…]in/androidx/compose/material3/ModalBottomSheet.android.kt.html and see whats avaiable to change and how they setup things internally 🙂
If not suits, can create your own custom bottomsheet, with Modifier.anchorDraggable 🙂

[Joel Denke]

In their code they using:

Column(Modifier.fillMaxWidth()) {
                    if (dragHandle != null) {
                        val collapseActionLabel =
                            getString(Strings.BottomSheetPartialExpandDescription)
                        val dismissActionLabel = getString(Strings.BottomSheetDismissDescription)
                        val expandActionLabel = getString(Strings.BottomSheetExpandDescription)
                        Box(
                            Modifier
                                .align(Alignment.CenterHorizontally)
                                .semantics(mergeDescendants = true) {
                                    // Provides semantics to interact with the bottomsheet based on its
                                    // current value.
                                    with(sheetState) {
                                        dismiss(dismissActionLabel) {
                                            animateToDismiss()
                                            true
                                        }
                                        if (currentValue == PartiallyExpanded) {
                                            expand(expandActionLabel) {
                                                if (anchoredDraggableState.confirmValueChange(
                                                        Expanded
                                                    )
                                                ) {
                                                    scope.launch { sheetState.expand() }
                                                }
                                                true
                                            }
                                        } else if (hasPartiallyExpandedState) {
                                            collapse(collapseActionLabel) {
                                                if (anchoredDraggableState.confirmValueChange(
                                                        PartiallyExpanded
                                                    )
                                                ) {
                                                    scope.launch { partialExpand() }
                                                }
                                                true
                                            }
                                        }
                                    }
                                }
                        ) {
                            dragHandle()
                        }
                    }
                    content()
                }

If you set dragHandle = {} in ModalBottomSheet(dragHandle = {}) I think you will be able to draw your content as you wish 🙂

[Simen Sogard]

Thanks! Just sending in an empty dragHandle worked perfectly

[Joel Denke]

Nice, glad to hear 🙂 I think handle thing was inherited default from iOS, to be more accessiblity thing, but ah well not always wanted.
Can ofc draw your own handle and but buttons to left and right of the handle composable in a Row 😜

[Joel Denke]

Like Row {
LeftIconButton(Modifier.weight(1f))
BottomSheetDefaults.DragHandle()
RightIconButton(Modifier.weight(1f))
}