Instruction

Before getting started, note that you need to add the following dependency in your module-specific build.gradle.kts file to use the navigation component with Jetpack Compose apps:

dependencies {
    val navigationVersion = "2.7.7"
    implementation("androidx.navigation:navigation-compose:$navigationVersion")
}

Now, briefly look at the key concepts of navigation that you’ll be diving into further in this lesson: — Controller: The controller serves as the central component that orchestrates navigation within the app and provides methods to navigate between parts of the app. It also provides support for managing deep links and back stack; you’ll learn about these in later lessons in this module. — Graph: Different destinations of the app where a user can navigate to are defined and contained in the structure called navigation graph. — Host: The host is a UI element representing the currently selected state/destination of the navigation graph. Hence, the host updates its destination whenever a new navigation destination is selected.

Navigation Controller

You can create a navigation controller using the NavController class. It provides the API for navigating between destinations in the app.

Here’s how you create an instance of NavController in your app:

val navController = rememberNavController()

To ensure all the relevant composables can access the NavController, it’s important to define it high up in the hierarchy.

Note: The function rememberNavController() has similar implications as that of the remember API — it allows Jetpack Compose to retain the value across recompositions.

Navigation Graph

The navigation graph is a concept in the navigation component wherein all of your app’s possible destinations are defined. It also defines a start destination, which acts as the default starting destination when the graph is instantiated and accessed.

Here’s how you define a navigation graph in your app:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("booking") { BookingScreen() }
    // You can add more destinations here
  }
}

Each destination must be defined with a “route”. For example, in the code snippet above, there are two routes: “home” and “booking”. The route acts as the identifier for the controller to resolve which destination it redirects to.

Also, note that “home” is defined as the graph’s startDestination.

Navigation Host

The navigation host is a UI element that acts as a holder where the currently selected destination will be rendered.

To define a navigation host, you must use the NavHost composable. You can define the NavHost as follows:

NavHost(navController, navGraph)

As you can observe from the code snippet above, the NavHost takes in a NavController and a NavGraph instance as arguments.

Alternatively, you can define the NavGraph as part of the NavHost composable for a more concise implementation:

NavHost(navController = navController, startDestination = "home") {
  composable("home") { HomeScreen() }
  composable("booking") { BookingScreen() }
  // You can add more destinations here
}

Note: A NavController is associated with a single NavHost composable. The NavController interacts with the NavHost to access and navigate to destinations of the navigation graph.

To navigate between destinations, you must use the navigation controller to call a function — navigate — and pass in the route of the desired destination. For instance, to navigate from HomeScreen to BookingScreen, you can use the code below:

navController.navigate("booking")

Now, it’s time to stitch all this together and look into building a working implementation of the navigation component in code.