Any way to show a bottom sheet dialog without addi...

# compose

[Joe Jensen]

Any way to show a bottom sheet dialog without adding ModalBottomSheetLayout as a root component to the app?

My use case: I have an existing app with bottom navigation implemented as a fragment, and I will slowly migrate each tab (each its own fragment) to jetpack compose. How would I render a bottom sheet on top of all that UI? There doesn't seem to be an equivalent to AlertDialog but for bottom sheets

[Tim Malseed]

The 'modal' bottom sheet is the 'alert dialog' of bottom sheets. It's 'modal', so it can be presented from anywhere. It doesn't have to be at root level

[Joe Jensen]

Here's how I'm trying to use it: As a sub-view to my main screen

@ExperimentalMaterialApi
@ExperimentalAnimationApi
@Composable
fun MainScreen() {
  ZumperTheme {
    Surface(color = ZColor2.BackgroundLight) {
      Column {
        Text(text = "Testing 1", modifier = Modifier.padding(16.dp))
        Text(text = "Testing 2", modifier = Modifier.padding(16.dp))
        val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
        val scope = rememberCoroutineScope()
        ModalBottomSheetLayout(
                sheetState = sheetState,
                sheetContent = {
                  Text(text = "Testing 2", modifier = Modifier.padding(16.dp))
                }
        ) {
          Button(onClick = {
            scope.launch { sheetState.show() }
          }) {
            Text(text = "Open Sheet", modifier = Modifier.padding(16.dp))
          }
        }
        Text(text = "Testing 3", modifier = Modifier.padding(16.dp))
        Text(text = "Testing 4", modifier = Modifier.padding(16.dp))
      }
    }
  }
}

[Joe Jensen]

I'm probably implementing this in the wrong way.. but the reason I asked was because the ModalBottomSheetLayout requires that you wrap the content - alert dialog doesn't.
The above screen renders this:

[knthmn]

I remember copying everything from Dialog() and modifying it to use Android platform's bottom sheet dialog and it worked.

[Joe Jensen]

gist anywhere? 😄

[Joe Jensen]

i'm looking for an implementation like SwiftUIs sheet https://www.hackingwithswift.com/quick-start/swiftui/how-to-present-a-new-view-using-sheets

[knthmn]

sorry I didn't have it saved. there is a DialogWrapper in compose that subclasses Android's Dialog, I copied everything from there, but subclass it to material's BottomSheetDialog. I remember it working, but it was drawing over navigation bar when it came up and I didn't bother to fix it.

[Tim Malseed]

I see what you mean about having to wrap the content with your bottom sheet. Still, you don't have to place this at the root of your layout hierarchy. You can just wrap the content with the bottom sheet in each place where the sheet is required. If you factor out the common parts of the BottomSheet to a separate function, this shouldn't create too much mess.

[knthmn]

@Tim Malseed I think his problem is that you can't use ModalBottomSheet everywhere since it only creates the bottom sheet inside the area, unlike AlertDialog which is globally positioned.

[Tim Malseed]

I stand corrected. I'm actually experiencing the exact same issue with a modal bottom sheet somewhere in my app, and I'd forgotten about it haha

[Ian Lake]

Yep, you have to use ModalBottomSheetLayout because that's what allows it to draw the scrim and intercept touch events outside of it. In a hybrid world, it sounds like you just be using a BottomSheetDialogFragment like before

[Ian Lake]

(feel free to star https://issuetracker.google.com/issues/180247978 for integration of bottom sheets into Navigation Compose)

[Joe Jensen]

Thanks!