In android compose, there is Scaffold
composable function to create a layout that contains bottom navigation bar and there is another function named BottomSheetScaffold
to create a layout that contains bottom navigation bar.
My question is how to achieve both the bottom sheet and Bottom Navigation bar in same layout?
I treid using BottomSheetScaffold and adding the bottom navigation bar in the layout but I failed when I used NavHost besides it in the same column.
Simplified code for the case:
BottomSheetScaffold(
{ BottomSheetComposable },
topBar = {
TopAppBar()
},
sheetPeekHeight = 0.dp
) {
Column() {
NavHost(
navController,
startDestination = "route"
) {
Composable("route") {}
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
) {
BottomNavigationBar()
}
}
}
A temporary solution would to use scaffold
inside BottomSheetScaffold
content
BottomSheetScaffold(
sheetShape = BottomSheetShape,
sheetContent = {
currentBottomSheetScreen?.let {
MainBottomSheetLayout(
it, navController, textToSpeech,
closeSheet
)
}
}) {
Scaffold(
topBar = { LinguisticTopAppBar(navController, mainViewModel, openSheet) },
bottomBar = {
BottomNavigationBar(mainViewModel, navController)
},
) {
Column(modifier = Modifier.padding(it)) {
MainContent(
navController,
mainViewModel,
openSheet
)
}
}
}