I am using a navigation bar, but the issue I am fa...

# compose-android

[Qamar Khan]

I am using a navigation bar, but the issue I am facing is that when the bottom sheet is open, it appears behind the bottom navigation bar. I would like the bottom sheet to appear above the navigation bar or hide when the sheet is open. Please note that I have a composable screen called ServiceScreen where I am writing the code for the bottom sheet.
Here is the code for the MainScreen composable function where the bottom navigation bar is implemented: see thread for code

[Qamar Khan]

@Composable
fun MainScreen(navController: NavHostController) {
var showBottomBar by rememberSaveable { mutableStateOf(true) }

Scaffold(
topBar = { },
bottomBar = {
if (showBottomBar) {
BottomAppBar(
modifier = Modifier.fillMaxWidth(),
backgroundColor = Color.White
) {
BottomNavigationBar(navController)
}
}
},
content = { padding ->
Box(modifier = Modifier.padding(padding)) {
Navigation(navController)
}
},
)
}

[Qamar Khan]

i want to achieve this basically

[Tim Malseed]

Where is your bottom sheet code?

[Qamar Khan]

@SuppressLint("StateFlowValueCalledInComposition")
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ServiceScreen(userViewModel: ServicesViewModel) {
    // val state by userViewModel.uiState.collectAsState()

    val modalSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        confirmStateChange = { it != ModalBottomSheetValue.HalfExpanded }
    )
    val roundedCornerRadius = 20.dp
    val sheetShape =
        RoundedCornerShape(topStart = roundedCornerRadius, topEnd = roundedCornerRadius)

    val coroutineScope = rememberCoroutineScope()
    val closeSheet: () -> Unit = {
        coroutineScope.launch {
            modalSheetState.hide()
        }
    }
    val openSheet: () -> Unit = {
        coroutineScope.launch {
            if (modalSheetState.isVisible) {
                modalSheetState.hide()
            } else {
                modalSheetState.animateTo(ModalBottomSheetValue.Expanded)
            }
        }
    }

    GenericBottomSheet(
        sheetState = modalSheetState,
        sheetShape = sheetShape,
        sheetContent = {
            ShowLoginOrRegisterBottomSheet(
                closeSheet = closeSheet,
                viewModel = userViewModel
            )
        },
        mainContent = {
            ScreenContent(
                openSheet = openSheet,
                userViewModel = userViewModel
            )
        }
    )
}

@Tim Malseed

[Tim Malseed]

In the code above, I can’t tell how MainScreen and ServiceScreen are related. Is one of them nested inside the other one somehow?

[Qamar Khan]

content = { padding -> // We have to pass the scaffold inner padding to our content. That's why we use Box.
    Box(modifier = Modifier.padding(padding)) {
       Navigation(navController)
    }
}

as you see navigation handle the screen content in main activity,
this is the below code is used to render any composable screen

@Composable
fun Navigation(navController: NavHostController){
    NavHost(
        navController = navController,
        startDestination = MainDirection.splash.destination

    ) {
        composable(MainDirection.splash.destination) {
            SplashScreen(hiltViewModel(), navController = navController)
        }
        composable(MainDirection.personalise.destination) {
            PersonaliseScreen(hiltViewModel(), navController = navController)
        }

[Tim Malseed]

OK, so Navigation() lives inside MainScreen(). And then, where does ServiceScreen() live?

[Qamar Khan]

yes exectly and ServiceScreen also lives in navigation

[Tim Malseed]

So it’s one of your navigation destinations?

[Qamar Khan]

yes its my navigation destination

composable(DashboardDirection.services.destination){
    ServiceScreen(hiltViewModel())
}

[Tim Malseed]

So, it sounds like you want to call showBottomBar = false when your nav destination is DashboardDirection.services.destination

[Tim Malseed]

Maybe you could add an OnDestinationChangedListener to your NavHostController and hide the bottom sheet when the destination is ‘services’

[Qamar Khan]

Nope i have a bottomsheet on service screen and when bottom sheet is opened, then i want its should be above bottom navigation or else i can hide navigation bar.. i attached image above you can check what i want

[Tim Malseed]

I would like the bottom sheet to appear above the navigation bar or hide when the sheet is open

So you don’t want it to hide when the sheet is open?

[Oleksandr Balan]

I think you want to use another component: Modal Bottom Sheet instead of the standard one.

In Material3 version of ✏️ there is a fairly new implementation of the ModalBottomSheet. Which is a little bit buggy at the moment, see issue tracker.

In Material2 version there is only a ModalBottomSheetLayout implementation, which is hard to use in destinations inside the bottom navigation bar.

If you do not use M3 library, or M3 bottom sheet does not work correctly in your case, you could try this ModalSheet library, which basically wraps the ModalBottomSheetLayout ands shows it in the custom fullscreen popup to ensure that bottom sheet is displayed above other UI.

[dewildte]

You could also treat the BottomSheet as a navigation destination.

[dewildte]

Accompanist has some code that does this kind of thing too:
https://google.github.io/accompanist/navigation-material/#bottom-sheet-destinations

[Qamar Khan]

@Oleksandr Balan Thanks for your suggestion, it works for me https://github.com/oleksandrbalan/modalsheet
i just get the specific code from library and used that according to my requirement, once again thanks alot. Appreciate your time.

[Qamar Khan]

@Oleksandr Balan @dewildte @Tim Malseed i really Appreciate your time and effort, thanks to all 🙂