Navigation in Jetpack Compose

The starter project application is a sample movie booking app and consists of three files: — MainActivity.kt: The activity that will host the content of your Jetpack Compose application. — WelcomeScreen.kt: The first screen that will be shown when the app is opened. This contains a button to start the booking process and is intended to navigate the user to the second screen. — MovieSelectionScreen.kt: The movie-selection screen that the user will navigate to from the welcome screen.

Now, open the starter project in Android Studio and start by defining the dependency in the gradle > libs.versions.toml file.

navigationCompose = "2.7.7"

navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }

Then, add the dependency in the app module’s build.gradle.kts file.

implementation(libs.navigation.compose)

Click “Sync Now” when prompted to sync the project’s gradle file changes.

Now that the dependency for the navigation component is added, move to MainActivity.kt and start by defining the navigation controller.

val navController = rememberNavController()

Import the function if it isn’t resolved automatically.

Next, to set up a navigation graph, you must define a unique route for each possible destination.

Create a file in screens > Screens.kt, wherein you’ll define an enum for the list of screens along with their corresponding route defined as an attribute of the class.

enum class Screens(val route: String) {
  WELCOME_SCREEN("welcome"),
  MOVIE_SELECTION_SCREEN("movie-selection"),
}

In this code, you’re defining two screens — WelcomeScreen and MovieSelectionScreen — with their respective routes.

Now, go back to MainActivity.kt to define an instance of navigation host wherein you’ll pass in the pre-defined navigation controller and also define a navigation graph.

Start by defining the NavHost and pass in the existing NavController instance and the ‘startDestination’ as the route of the WelcomeScreen.

NavHost(navController = navController, startDestination = WELCOME_SCREEN.route) {
  composable(WELCOME_SCREEN.route) {
      WelcomeScreen(onStartClick = { })
  }
}

Run the app and see that it opens with the WelcomeScreen as the starting screen.

Then, define the additional destination of the navigation graph in the body of the NavHost.

composable(MOVIE_SELECTION_SCREEN.route) {
  MovieSelectionScreen()
}

Rerun the app and tap the button on the WelcomeScreen. Unfortunately, nothing happens.

Notice that the onStartClick lambda is empty. You’ll define the code to navigate between the screens. This lambda would be invoked internally by the WelcomeScreen when the user taps the button to initiate the movie-booking process.

Do you remember you had to use the NavController API to navigate to another destination?

Add navController.navigate(MOVIE_SELECTION_SCREEN.route) inside the lambda.

navController.navigate(MOVIE_SELECTION_SCREEN.route)

Rerun the app. Now when you tap the button on the WelcomeScreen, the app navigates to the MovieSelectionScreen.

Great! You have just completed a working implementation of navigating between screens in your Jetpack Compose application.