2

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

Screenshot

Cesar N.
  • 58
  • 6

2 Answers2

2

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:

enter image description here

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()
    }
}
  1. In your Bottom Sheet declaration, do the foollowing:
val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    confirmStateChange = {
        it != ModalBottomSheetValue.HalfExpanded
    }
)
  1. Call the following to show/hide the Bottom Sheet:
coroutineScope.launch {
    if (modalBottomSheetState.isVisible) {
        modalBottomSheetState.hide()
    } else {
        modalBottomSheetState.forceExpand()
    }
}
nglauber
  • 18,674
  • 6
  • 70
  • 75
  • Does this mean that if we want to hide tab bar on opening bottom sheet, we need to wrap bottom tab bar with bottom sheet? We lose a lot of with this :( – Jalson1982 Jun 27 '22 at 12:31
  • works like a spell :) – Vikram Ragu Sep 27 '22 at 17:52
  • it doesn't help. In my case I have a scaffold which has a content and bottom navigation. On click of each menu in bottom sheet navigation I change the content of upper portion. I need to show the bottomSheet in one of those content/screens and I want to hide bottom navigation when showing the bottom sheet. Thank you – Talha Akbar Jan 10 '23 at 12:18
1

A temporary solution that I use is passing lambda function that will change bottom bar visibility to compose screen

Frengky
  • 26
  • 3