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 theremember
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 singleNavHost
composable. TheNavController
interacts with theNavHost
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.