Update UI components with NavigationUI

The Navigation Architecture Component includes a NavigationUI
class. This class contains static methods that manage navigation with the top
app bar, the navigation drawer, and bottom navigation.

Listen for navigation events

Interacting with the NavController
is the primary method for navigating between destinations. The NavController
is responsible for replacing the contents of the NavHost
with the new destination. In many cases, UI elements—such as a top app bar or
other persistent navigation controls like a BottomNavigationBar—live outside
of the NavHost and need to be updated as you navigate between destinations.

NavController offers an OnDestinationChangedListener interface that is
called when the NavController's current destination
or its arguments change. A new listener can be registered via the
addOnDestinationChangedListener()
method. Note that when calling addOnDestinationChangedListener(), if the
current destination exists, it is immediately sent to your listener.

NavigationUI uses OnDestinationChangedListener to make these common UI
components navigation-aware. Note, however, that you can also use
OnDestinationChangedListener on its own to make any custom UI or business
logic aware of navigation events.

As an example, you might have common UI elements that you intend to show in
some areas of your app while hiding them in others. Using your own
OnDestinationChangedListener, you can selectively show or hide these UI
elements based on the target destination, as shown in the following example:

Top app bar

The top app bar
provides a consistent place along the top of your app for displaying information
and actions from the current screen.

NavigationUI contains methods that automatically update content in your top
app bar as users navigate through your app. For example, NavigationUI uses the
destination labels from your navigation graph to keep the title of the top app
bar up-to-date.

When using NavigationUI with the top app bar methods discussed below, the
label you attach to destinations can be automatically populated from the
arguments provided to the destination by using the format of {argName} in your
label.

AppBarConfiguration

NavigationUI uses an AppBarConfiguration
object to manage the behavior of the Navigation button in the upper-left corner
of your app's display area. By default, the Navigation button is hidden when a
user is at a top-level destination of a navigation graph and appears as an Up
button in any other destination.

To use the start destination of your navigation graph as the only top-level
destination, you can create an AppBarConfiguration object and pass in the
corresponding navigation graph, as shown below:

val appBarConfiguration = AppBarConfiguration(navController.graph)

If you want to customize which destinations are considered top-level
destinations, you can instead pass a set of destination IDs to the constructor,
as shown below:

Action bar

To include navigation support with the default action bar, call
setupActionBarWithNavController()
from your main activity's onCreate() method, as shown below. Note that you
need to declare your AppBarConfiguration outside of onCreate(), since you
also use it when overriding onSupportNavigateUp():

Tie destinations to menu items

NavigationUI also provides helpers for tying destinations to menu-driven UI
components. NavigationUI contains a helper method,
onNavDestinationSelected(),
which takes a MenuItem along with the
NavController that hosts the
associated destination. If the id of the MenuItem matches the id of
the destination, the NavController can then navigate to that destination.

As an example, the XML snippets below define a menu item and a destination with
a common id, details_page_fragment:

If your menu was added via the Activity's onCreateOptionsMenu(), for example,
you can associate the menu items with destinations by overriding the Activity's
onOptionsItemSelected() to call onNavDestinationSelected(), as shown below:

Now, when a user clicks the details_page_fragment menu item, the app
automatically navigates to the corresponding destination with the same id.

Add a navigation drawer

The navigation drawer is a UI panel that shows your app's main navigation menu.
The drawer appears when the user touches the drawer icon
in the app bar or when the user swipes a finger from the left edge of the
screen.

The drawer icon is displayed on all top-level
destinations that use a DrawerLayout. Top-level destinations are the
root-level destinations of your app. They do not display an Up button in the app
bar.

To add a navigation drawer, first declare a
DrawerLayout as the root
view. Inside the DrawerLayout, add a layout for the main UI content and
another view that contains the contents of the navigation drawer.

For example, the following layout uses a DrawerLayout with two child views: a
NavHostFragment to
contain the main content and a
NavigationView
for the contents of the navigation drawer.

Bottom navigation

NavigationUI can also handle bottom navigation. When a user selects a menu
item, the NavController calls
onNavDestinationSelected()
and automatically updates the selected item in the bottom navigation bar.

To create a bottom navigation bar in your app, first define the bar in your main
activity, as shown below: