Bottom Nav Bar overlaps screen content in Jetpack Compose

Question

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

ianhanniballake · Accepted Answer · 2021-04-27T13:50:48.880

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

consider when BottomBar is clipped with a shape. then the areas of BottomBar that is cut, will be using scaffold's bg color. what I mean is that innerPadding should be applied after content bg color is set. https://stackoverflow.com/questions/76914671/jetpack-compose-bottombar-transparent-background-color-when-it-has-rounded-corne — mrzbn, Aug 20 '23 at 10:49

RobertoAllende · Answer 2 · 2023-05-22T01:30:58.137

12

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(bottom = innerPadding.calculateBottomPadding()) {
            BottomNavScreensController(navController = navController)
        }
    }
}

edited May 22 '23 at 01:30

answered Sep 29 '21 at 20:54

RobertoAllende

8,744
4
30
49

you can use `Modifier.padding(bottom= ...)` instead of specifying zeros – Lukas May 16 '23 at 10:25
You're right. Anwser updated. Thanks – RobertoAllende May 22 '23 at 01:31

score 6 · Answer 3 · answered Jan 20 '22 at 20:19

6

You no longer need to do any calculations. In the scaffold content, do:

content = { padding ->
  Column(
    modifier = Modifier.padding(padding)
  ) {...

answered Jan 20 '22 at 20:19

dessalines

6,352
5
42
59

score 4 · Answer 4 · answered Feb 16 '22 at 02:19

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

score 0 · Answer 5 · answered Jan 18 '23 at 08:22

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

Yehezkiel L · Answer 6 · 2023-01-24T14:48:39.370

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

Bottom Nav Bar overlaps screen content in Jetpack Compose

6 Answers6

Linked