Navigation Bar & Bottom App Bar in Jetpack Compose with Material 3

Navigation Bar, offers a persistent and convenient way to switch between primary destinations in an app. NavigationBar should contain three to five NavigationBarItems, each representing a singular destination.

Bottom App Bar, displays navigation and key actions at the bottom of mobile screens. This component provides access to up to four icon buttons as well as a floating action button (FAB).

Table of Contents

• Differences and Usage
• Gettings Started
• Navigation Bar
• Bottom App Bar
• Action Click from Child

Before we start, let’s understand the usage and difference between Navigation Bar and Bottom App Bar since they are not interchangeable, and they require different use cases.

Differences and Usage

Bottom App Bar should be used for screens with 2 to 5 actions. It’s not Navigation Bar and should not be used like one. FloatingActionButton is optional, use it when you need to and don’t place it outside of the Bottom App Bar. Bottom App Bar is not recommended on large screens.

Navigation Bar provide access to destinations, whereas Bottom App Bar can contain both destination and actions. Navigation Bar provide access to 3 to 5 destinations. It should be used for top-level destinations only. If you need more that 5 destinations, you can either use Tabsor Navigation Drawer, if you need less than 3 destinations, you should use Tabs.

You can check my Navigation Drawer & Tabs blog,

App Bar and Navigation Drawer in Jetpack Compose

Tabs (TabLayout) in Jetpack Compose

Getting Started

First, let’s add Material 3 dependency. You can see the latest M3 versions on the Compose Material 3 releases page.

def material3_version = "1.0.1"
implementation "androidx.compose.material3:material3:$material3_version"

Optionally, if you are already using Material 2, you can follow this blog and migrate to Material 3.

Finally, we will be using navigation in Jetpack Compose, if you don’t know how it works, I recommend you check this blog before this one.

Navigation with Arguments in Jetpack Compose

Navigation Bar

Let’s start by creating model class for NavigationBarItem,

data class BottomNavItem(
    val name: String,
    val route: String,
    val icon: ImageVector,
)

You can change this class according to your needs, we’ll keep it simple. We’ll use route for navigation, name & icon for NavigationBarItem.

Now, we can create our list of BottomNavItem.

val bottomNavItems = listOf(
      BottomNavItem(
          name = "Home",
          route = "home",
          icon = Icons.Rounded.Home,
      ),
      BottomNavItem(
          name = "Create",
          route = "add",
          icon = Icons.Rounded.AddCircle,
      ),
      BottomNavItem(
          name = "Settings",
          route = "settings",
          icon = Icons.Rounded.Settings,
      ),
  )

That’s it. We are ready to implement Navigation Bar.

In this example, we’ve used routes to check selected, we can also use the alternative with indexes,

In both ways, our end result is the same. In the first example, we check current route and if it is the same as item.route, we mark it as selected. On the other hand, alternative method simply uses indexes.

That’s it!

Navigation Bar

Bottom App Bar

actions, the icon content of BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

floatingActionButton, optional floating action button at the end of BottomAppBar.

Note: I’ve left androidx.compose.material3. so you won’t be confused because Material 2 library also has the same composables.

Bottom App Bar

Action Click from Child

Extra note, if you want to set onClick methods from the child screen e.g. You set your Bottom App Bar inside of MainActivity.kt and you want to access it from different Composable Screen. You should use ViewModel,

class SharedViewModel: ViewModel() {
    var actionIconOnClick = mutableStateOf({})
}

and, set the actionIconOnClick from the child that you want to use,

LaunchedEffect(key1 = Unit) {
    sharedViewModel.actionIconOnClick.value = {
        //Your code here  
    }
}

Finally, call actionIconOnClick from Bottom App Bar.

sharedViewModel.actionIconOnClick.value.invoke()

Navigation Bar GIF

Final Words,

Since the purpose of this article is to show Navigation Bar & Bottom App Bar only, we ignored design architectures, state hoisting, compose architecture etc. while implementing. I recommend you research and learn them before developing your application.

Sources:

• Navigation bar — Material Design 3
• androidx.compose.material3 | Android Developers
• Bottom app bar — Material Design 3
• androidx.compose.material3 | Android Developers