Bottom Navigation With Docked FAB in Jetpack Compose
In this article, you’ll learn how to add a docked Floating Action Button in a bottom navigation on Android.
So recently, I was working on a project that required me to use Jetpack Compose. All was going well until I was tasked with designing a bottom navigation with a docked FAB, I actually thought of it as a very easy task that I'd complete within an hour, but it turns out I was wrong. I had to rethink my approach, and I was able to solve it.
Below, I’ll get into more details on how to solve it.
Add Navigation dependency
dependencies {
implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
}After importing the right dependencies, we’ll start implementing the necessary parts.
Next, we’ll create a sealed class that represents our possible screen destinations.
Then we place the screen destination items in a list that can be used by the BottomNavigationItem.
Next, we create the bottom navigation composable
We use Scaffold to knit everything together because it already has slots for the needed components.
The BottomAppbar, which houses the bottom navigation and also provides the cutout shape, is housed in the BottomBar slot.
The Scaffold also provides slots for the Floating Action Button and the Content slot.
Inside the content slot, we’ll put our Navigation Graph there, which will give our NavItems the ability to navigate to their respective routes.
The end result should look like this…
And that should be all for now.
Until we meet next time
