Showing a BottomSheetScaffold with a BottomNavigation - Compose UI - Android

Question

Using Compose UI, I have a bottom navigation bar and a Bottom Sheet,

so starting a "BottomSheetScaffold" from "Catalogue" screen is causing the "Bottom Nav Bar" to stay visible.

How can I show "BottomSheetScaffold" making it cover the whole Screen (covering the bottom nav. bar), but keeping in mind to write the "BottomSheetScaffold" in the Compose Screen [Catalogue] itself, NOT on a higher level (Parent Activity Level) since it doesn't seem right

Answer 1

If I didn't misunderstood the question, you can wrap your content with a ModalBottomSheetLayout.

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        BottomSheetContent()
    }
) {
    Scaffold(...)
}

The result would be something like this:

It's not totally related to your question, but if you want to avoid the half-expanded state, you can do the following:

1. Declare the function below:

@ExperimentalMaterialApi
suspend fun ModalBottomSheetState.forceExpand() {
    try {
        animateTo(ModalBottomSheetValue.Expanded)
    } catch (e: CancellationException) {
        currentCoroutineContext().ensureActive()
        forceExpand()
    }
}

2. In your Bottom Sheet declaration, do the foollowing:

val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    confirmStateChange = {
        it != ModalBottomSheetValue.HalfExpanded
    }
)

3. Call the following to show/hide the Bottom Sheet:

coroutineScope.launch {
    if (modalBottomSheetState.isVisible) {
        modalBottomSheetState.hide()
    } else {
        modalBottomSheetState.forceExpand()
    }
}