How to Hide BottomNavigation While Scrolling with Jetpack Compose

Over the past few days, I’ve been diving into the latest updates of Material3 and experimenting with exciting new features in Jetpack Compose. In my upcoming Medium article, I’ll share how to integrate the new scroll behavior into the BottomAppBar. Join me as we explore how to enhance the user experience by hiding the BottomNavigation dynamically, all while maintaining a polished, modern look that aligns with Material Design principles.

At first, I was using a common approach that I believe everyone has been using before the latest updates in Material Design’s BottomAppBar.

If you can relate to this code, you are with me, this has been for some time the way of hiding the bottom navigation bar while you scroll, at first, you also need to provide to the Scaffold a nestedScrollBehaviour, with this, you can also hide this bottom bar on every screen that needs to be scrolled.

You see… Here we have a lot of code for just hiding or showing the BottomNavigation.

You can always extract this code for future reuse, but it’s not the cleanest approach. There are likely better methods available. However, as of today, we have an official experimental way to achieve this, and I will show you how.

Look at the code above for a little, this is how it will end up after we migrate to the new material3 API.

Looks nice right? Yes, it is!

Demo

If you’ve been using the first approach or other methods, you might have encountered a strange bug where hiding the BottomNavigation completely or partially results in a black background or odd behavior while scrolling.

With this new approach, as shown in the video, the end result is much smoother. Instead of animating its visibility, this method translates the position of the BottomAppBar with an animation.

The cool thing is that it's integrated with the new Material 3 API.

Usage

First, integrate the latest material3 library, in this case, for me it is 1.2.1

implementation 'androidx.compose.material3:material3-android:1.2.1'

This version includes a new overload method for BottomAppBar which uses the new scrollBehaviour (optional) to define a BottomAppBarScrollBehaviour. We will be using this one to hide our bottom navigation bar.

Go to your Scaffold (we need to use a scaffold because it defines a bottomBar and should be used to layout the entire screens). This Scaffold usually is inside your MainActivity.

Before your Scaffold and inside your setContent lambda initialize the scrollBehaviour.

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()

And then, send that scrollBehaviour to the new BottomAppBar composable included in material 3.

For now, the only method available with BottomAppBarScrollBehaviour is exitAlwaysScrollBehaviour, its implementation is.

As you can see from the java docs above, there are 3 optional parameters that you can set up according to your needs (canScroll, snapAnimationSpec, flingAnimationSpec).

From these 3 the most important one is the last one

Using flingAnimationSpec ensures that the BottomAppBar animates in a smooth, natural manner when flung. This enhances the user experience by making the interactions feel more responsive and fluid. Instead of abruptly stopping or starting, the animation decays gradually depending on user's fling speed.

That’s it!

I hope this guide helps improve your UI’s user experience and makes your codebase cleaner and more maintainable.