Develop Reference

Jetpack compose Bottom sheet in multi screens

What is the best way to implement bottom sheet for multiple screens in jetpack compose? Do we have to define Bottom sheet layout in each screen? Then what to do if we wanted our bottom sheet to overlap on bottom nav bar?

You can create a custom layout like
MyAppCustomLayout(
showBottomBar: Boolean = false,
state: ModalBottomSheetState = ModalBottomSheetState(initialValue =
ModalBottomSheetValue.Hidden),
sheetContent: #Composable () -> Unit = {},
content: #Composable () -> Unit)
{
ModalBottomSheetLayout(
sheetState = state,
sheetContent = { sheetContent() })
{
Scaffold(
bottomBar = if(showBottomBar)
{{
YourBottomNavigationView()
}}
else {{}})
{ content() }
}
}
And use it anywhere in your app like below.
val state = rememberModalBottomSheetState()
MyAppCustomLayout(
state = state,
sheetcontent = {
Column {
Text("Some bottomSheet content")
}
})
{
Column {
Text("Some content")
}
}

If you are using Jetpack Navigation Compose in your project, you might consider using Jetpack Navigation Compose Material to implement it.
For more detail, refer to the samples

What is the correct way to implement material app with toolbar, bottom bar and drawer in compose?

Before Jetpack Compose I was using Navigation Component in the projects in View system world.
Apps had only one activity - toolbar, bottom bar and drawer were added only to this activity once.
Apps could have many screens (fragments) and only top destination fragments were displaying bottom bar and allowed drawer, for other fragments it was hidden.
All of that was handled with Navigation Component like this from the activity:
fun initNavigation() {
val topLevelDestinationFragments = setOf(R.id.homeFragment, R.id.photosFragment)
appBarConfiguration = AppBarConfiguration(
topLevelDestinationFragments,
binding.drawerLayout
)
setupActionBarWithNavController(navController, appBarConfiguration)
binding.drawerNavigationView.setupWithNavController(navController)
binding.bottomNavigationView.setupWithNavController(navController)
navController.addOnDestinationChangedListener { _, destination, _ ->
// don't change bars if a dialog fragment
if (destination is FloatingWindow) {
return#addOnDestinationChangedListener
}
// Google solution to hide navigation bars
// https://developer.android.com/guide/navigation/navigation-ui#listen_for_navigation_events
val allowBottomAndDrawerNavigation = destination.id in topLevelDestinationFragments
binding.bottomNavigationView.isVisible = allowBottomAndDrawerNavigation
binding.drawerLayout.setDrawerLockMode(
if (allowBottomAndDrawerNavigation) {
DrawerLayout.LOCK_MODE_UNLOCKED
} else {
DrawerLayout.LOCK_MODE_LOCKED_CLOSED
}
)
binding.toolbar.isVisible = // if we need to hide toolbar for specific fragments
}
}
override fun onSupportNavigateUp(): Boolean {
return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
Quite easy, no need to add separately toolbar for each fragment and so on (so it was added only to the layout of the activity, it wasn't added to each layout of each fragment)
Navigation Component automatically handles back and menu (for drawer) buttons on the toolbar, automatically switches between them because it knows top destinations
Is there something similar for Compose?
Because I checked official Google sample "JetNews" from CodeLabs git https://github.com/googlecodelabs/android-compose-codelabs/tree/end/AccessibilityCodelab/app/src/main/java/com/example/jetnews/ui
They use compose navigation there but they separately added Scaffold for each compose screen.
For example "Home" compose screen has it own Scaffold
Scaffold(
scaffoldState = scaffoldState,
topBar = {
val title = stringResource(id = R.string.app_name)
InsetAwareTopAppBar(
title = { Text(text = title) },
navigationIcon = {
IconButton(onClick = { coroutineScope.launch { openDrawer() } }) {
Icon(
painter = painterResource(R.drawable.ic_jetnews_logo),
contentDescription = stringResource(R.string.cd_open_navigation_drawer)
)
}
}
)
}
)
And "Article" compose screen has it own Scaffold
Scaffold(
topBar = {
InsetAwareTopAppBar(
title = {
Text(
text = "Published in: ${post.publication?.name}",
style = MaterialTheme.typography.subtitle2,
color = LocalContentColor.current
)
},
navigationIcon = {
IconButton(onClick = onBack) {
Icon(
imageVector = Icons.Filled.ArrowBack,
// Step 4: Content descriptions
contentDescription = stringResource(
R.string.cd_navigate_up
)
)
}
}
)
}
)
So basically here we duplicate the code and define manually different logic for navigationIcon (icon and action) of toolbar
Does it mean that if we have some details screens with back arrow button and without bottom bar then we define a separate Scaffold and can't just use one Scaffold for all compose screens of the app?
Or can we implement the same logic as well for all compose screens as we did with Navigation Component in View system? Also setting top destinations, hiding bottom bar and locking drawer for non top destinations.

I guess the correct way is to set top level Scaffold (where we define theme and navigation) with AppDrawer and BottomBar and add some logic if it should be added to a screen by checking the current navigation route:
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
e.g.:
drawerContent = if (isTopLevelDestination) {
{
AppDrawer(
...
)
}
} else {
null
},
bottomBar = {
if (isTopLevelDestination) {
AppBottomBar(
...
)
}
}
But with TopAppBar it's not that easy. We can't really add it to top level Scaffold in case when toolbar can have actions for specific screens
That's why each screen additionally defines its Scaffold with TopAppBar configured as needed.
Only if an app is very simple and toolbar doesn't have any actions for all screens of the app, just hardcoded titles for all screens, then we can define TopAppBar in top level Scaffold but for more complicated apps each screen should define its own toolbar

How to place tabs at bottom of screen with bottom navbar in jetpack compose

I'm already using bottom navigation bar in app. For one composable screen, I need to place tabs at bottom of screen (above bottom bar) and its content to above tabs. How do I achieve that setup?

You can use a Scaffold with a bottomBar:
Scaffold(
scaffoldState = scaffoldState,
bottomBar = {
BottomAppBar() {
//....
}
},
content = { innerPadding ->
Column(
Modifier
.fillMaxSize()
.padding(bottom = innerPadding.calculateBottomPadding()),
) {
Column( modifier = Modifier.weight(1f)){
//Content
}
TabRow(selectedTabIndex = state) {
//....
}
}
}
)

Cannot find a way to use both at same time, bottom sheet and bottom navigation bar in android compose

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
)
}
}
}

Bottom Nav Bar overlaps screen content in Jetpack Compose

I have a BottomNavBar which is called inside the bottomBar of a Scaffold.
Every screen contains a LazyColumn which displays a bunch of images.
For some reason when I finish scrolling, the BottomNavBar overlaps the lower part of the items list.
How can I fix this?
Here the set content of MainActivity
SetContent{
Scaffold(
topBar = {
TopAppBar(
title = { Text(text = "tartufozon") },
actions = {
IconButton(onClick = { Timber.d("Mail clicked") }) {
Icon(Icons.Default.Email, contentDescription = null)
}
}
)
},
bottomBar = {
BottomNavBar(navController = navController)
}
) {
BottomNavScreensController(navController = navController)
}
}

As per the API definition for Scaffold, your inner content (the trailing lambda you have your BottomNavScreensController in), is given a PaddingValues object that gives you the right amount of padding for your top app bar, bottom bar, etc.
Right now, you're not referencing that padding at all and hence, your content is not padded in. This is what is causing your overlap.
You can add a Box around your BottomNavScreensController to apply the padding, or pass the padding directly into your BottomNavScreensController so that each individual screen can correctly apply the padding; either solution works.
Scaffold(
topBar = {
//
},
bottomBar = {
//
}
) { innerPadding ->
// Apply the padding globally to the whole BottomNavScreensController
Box(modifier = Modifier.padding(innerPadding)) {
BottomNavScreensController(navController = navController)
}
}
}

Following ianhanniballake's answer and its comments and just to save you few minutes. The code would be something like:
Scaffold(
topBar = {
//
},
bottomBar = {
//
}
) { innerPadding ->
Box(modifier = Modifier.padding(
PaddingValues(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding()) {
BottomNavScreensController(navController = navController)
}
}
}

You no longer need to do any calculations. In the scaffold content, do:
content = { padding ->
Column(
modifier = Modifier.padding(padding)
) {...

Scaffold(
bottomBar = {
BottomNavigationBar(navController = navController)
}
) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
DestinationsNavHost(
navGraph = NavGraphs.root,
navController = navController,
engine = navHostEngine
)
}
}

Add your layouts and views in content with its padding like in the example:
Scaffold(
content = {
Box(modifier = Modifier.padding(it)) {
//add your layout here
}
},
topBar = {
//your top bar
},
floatingActionButton = {
//your floating action bar
},
bottomBar = {
//your bottom navigation
}
)

Following ianhanniballake answer, if you have a list in your main screen and want to show/hide the bottom bar. It will perform unexpected behavior when you back to list screen (the scroll state is in very bottom) and show the navigation bar.The list item will scroll up a bit which cause the list doesn't fully scrolled to the bottom.
This is because of when you back to the list screen and want to show the bottom bar, the list already there. Then the bottom bar will show and list will not calculate the innerPadding for more.
To handle this, just pass the innerPadding into the list screen like this:
Scaffold(
bottomBar = {
BottomNavBar(navController)
}) { innerPadding ->
NavHost(
navController = navController,
startDestination = MovieListDirections.destination
) {
MovieListDirections.screenWithPaddingBottomBar(
this,
innerPadding.calculateBottomPadding() // pass here
)
}
Then in the list screen
#Composable
fun MovieListMainView(viewModel: MovieListViewModel = hiltViewModel(),
bottomBarHeight: Float) {
val movieList by viewModel.movieList.collectAsState()
var navBarHeight by rememberSaveable { mutableStateOf(0f) }
if (bottomBarHeight != 0f) {
navBarHeight = bottomBarHeight
}
MovieListLayout().MovieGridLayout(
modifier = Modifier.padding(0.dp, 0.dp, 0.dp, navBarHeight.dp),
movies = movieList.movieList.movieItems,
onItemClick = {
viewModel.onMovieClicked(it)
})
}