Instruction

Introduction to Bottom Navigation

Bottom navigation is a UI element that helps add a few (generally three to five) top-level destinations in the app at the screen’s bottom. It’s a common practice to add bottom-bar navigation in an app with the most critical or frequently visited app sections, often shown with an icon and, optionally, a label, although you can customize that according to your requirements.

Here’s an example of what a bottom-navigation bar looks like:

Understanding NavigationBar & NavigationBarItem and Integration with Navigation Component

To use bottom navigation in your app, add the following dependency to the app:

dependencies {
  implementation("androidx.compose.material:material:1.6.8")
}

The NavigationBar composable is the parent container that can contain several NavigationBarItem composables, wherein each NavigationBarItem represents a navigation destination.

While defining a NavigationBarItem, you can set values or actions such as: — selected: Represents whether it’s the selected item. — onClick: Called when this item is clicked. — icon: The icon to show for this item. — label: Optional text label for the item.

You can also configure details such as: — Whether the item should be enabled or disabled. — Whether the label should be shown always or only when the item is selected. — Setting colors for different states (selected, unselected, disabled and indicator) of the item.

This lesson aims to cover only a brief understanding of bottom navigation. For a detailed understanding, you are encouraged to check the official documentation.

Here’s a sample code snippet of a NavigationBar with two NavigationBarItems:

var navBarIndex by remember { mutableIntStateOf(0) }

NavigationBar {
  NavigationBarItem(
    selected = navBarIndex == 0,
    onClick = {
      navBarIndex = 0
      // navigate to email screen
    },
    icon = {
      Icon(
        imageVector = Icons.Outlined.Email,
        contentDescription = "Email"
      )
    },
    label = { Text(text = "Email") },
  )

  NavigationBarItem(
    selected = navBarIndex == 1,
    onClick = {
      navBarIndex = 1
      // navigate to call screen
    },
    icon = {
      Icon(
        imageVector = Icons.Outlined.Call,
        contentDescription = "Call"
      )
    },
    label = { Text(text = "Call") },
  )
}

Note how the variable navBarIndex is used to store the index of the currently selected NavigationBarItem. It’s then used to infer whether a NavigationBarItem is selected or not. Moreover, the onClick lambda updates the navBarIndex value to the index of the corresponding NavigationBarItem.

To integrate the NavigationBar with the navigation component, you must ensure you’ve defined the NavController high enough in the composable hierarchy that it can be accessed by the NavigationBar.

Here’s a sample code snippet using a Scaffold composable, wherein NavigationBar is set as the bottom bar and the screen’s content is based on the selected destination in the navigation graph:

val navController = rememberNavController()

Scaffold(
  bottomBar = {
    NavigationBar {
      NavigationBarItem(...)
      NavigationBarItem(...)
    }
  }
) { innerPadding ->
  NavHost(
    navController = navController,
    startDestination = "email-screen",
    modifier = Modifier.padding(innerPadding)
  ) {

    composable("email-screen") {
      ...
    }
    composable("call-screen") {
      ...
    }
  }
}

Given that the NavigationBar and the NavigationBarItem(s) defined within it can access the NavController instance, you can navigate to the destination by calling the navigate() function on the NavController instance.

NavigationBarItem(
  onClick = {
    navController.navigate("call-screen")
  }
  ...
)

Now that you’ve learned how to use bottom navigation and integrate it with the navigation component, it’s time to implement it in code to see it in action.