You can fork or clone the app from Github.

Composing time

Our entry point to the app is a Compose activity that contains one composable function called MainScreen.

MainScreen will contain a navigation bar and another composable function that will represent a screen that can display some spooky animation.

MainScreen is implemented like this:

Let’s break it down, the first part is the navController,

val navController = rememberNavController()

We create a val using the rememberNavController method provided by the navigation library.
Remember is a concept from the Compose world and is used for holding state, more on states in Jetpack Compose can be learned here.

Next, we declare our navigation items:

val bottomNavigationItems = listOf(
    BottomNavigationScreens.Frankendroid,
    BottomNavigationScreens.Pumpkin,
    BottomNavigationScreens.Ghost,
    BottomNavigationScreens.ScaryBag
)

These are contained in a sealed class and hold three parameters:

• A String to represent a route.
• A String resource for the name on the navigation button in the bottom bar
• A VectorAsset for the Icon.

Then we just create a Scaffold with only a bottom bar for this specific spooky app example:

Scaffold(
    bottomBar = { 
        SpookyAppBottomNavigation(navController, bottomNavigationItems)
    },
) {
    MainScreenNavigationConfigurations(navController)
}

The Navigation bottom bar

Now let’s implement SpookyAppBottomNavigation, It’s a BottomNavigation with four BottomNavigationItem created from the list we declared in the first part.

So most of the code is straight forward, we take the navController and the list of navigation items, and while iterating over them, we declare the icon, label, selected state, and onClick lambda for each.

The selected state is determined by the current route:

selected = currentRoute == screen.route

the screen is the model for which we are creating the current navigation item we are on, so what is this currentRoute?
In the previous section, we declared the screens with string properties called “route” this route string is how the navigation library tags the screens on its back stack, and the current route is the screen visible to us at this moment.

But how can we get the current route?

Luckily the folks at the navigation team provided us with a NavBackStackEntry class that holds the screen routes, we can access it like this:

So if we have the navController we can get the current back stack entry as a state by using:

navController.currentBackStackEntryAsState()

Then we just extract the current route string representation from its arguments property using the KEY_ROUTE constant:

return navBackStackEntry?.arguments?.getString(KEY_ROUTE)

So the last thing to implement is the onClick lambda which is responsible in our case to navigate us to the screen associated with our specific navigation item:

if (currentRoute != screen.route) {
    navController.navigate(screen.route)
}

Notice how we check if the item we clicked is the current route, in that case, do not wish to perform any navigation.

The last and most important part is providing the system with the information on where it should navigate given a specific route, so in the trailing lambda of the Scaffold we had a function that handles that:

MainScreenNavigationConfigurations(navController)

Let’s implement it:

So that function is just a wrapper for a function provided by the navigation library called NavHost, it will replace the XML we used to write for navigation in the old view system.
It takes the navController and a starting destination, we provided it with our Frankendroid’s route as the starting destination.
Remember that destinations are represented as routes that are of type String.

Now We define a composable for each route:

composable(BottomNavigationScreens.Frankendroid.route) {
    ScaryScreen(ScaryAnimation.Frankendroid)
}

As you can see what we are doing here is telling the NavHost to run the ScaryScreen function with the Frankendroid animation when we navigate to the BottomNavigationScreens.Frankendroid’s route.

If you play around with the app now you can see how pressing the back button pops the back stack to the latest screen we were on!

Full code available here.

Wasn’t that fun?
In the next article, I will cover animating the transitions between the screens and using SafeArgs to pass data between screens as well.

Stay tuned!