Adding Navigation to a Jetpack Compose Project

Jetpack Compose is a modern toolkit for building native Android UIs using Kotlin. It provides a declarative way of building UIs that makes it easy to create beautiful and responsive apps. The Navigation component is a part of the Jetpack library that provides support for navigating between different screens in your app.

Imports

To use the Navigation component in your Jetpack Compose project, you need to add the following dependency to your app module's build.gradle file:

Copycopy code to clipboard
1dependencies {
2    implementation 'androidx.navigation:navigation-compose:2.5.3'
3}

A Quick Example

Once you have added the dependency, you can start using the Navigation component in your project. The first step is to create a NavHost composable function that will act as the container for your app's screens. Here is an example of how you can create a NavHost composable:

Copycopy code to clipboard
1@Composable
2fun MyApp() {
3    val navController = rememberNavController()
4
5    NavHost(
6        navController = navController,
7        startDestination = "home"
8    ) {
9        composable("home") { HomeScreen(navController) }
10        composable("details") { DetailScreen(navController) }
11    }
12}

In this example, we are creating a MyApp composable function that will act as the entry point for our app. We are also creating a NavController object that will be used to navigate between different screens in our app. The NavHost composable function takes two parameters - navController and startDestination. The startDestination parameter specifies the first screen that should be displayed when the app is launched.

The next step is to create the individual screens for your app. In this example, we have created two screens - HomeScreen and DetailScreen. Both of these screens take a NavController object as a parameter so that they can navigate between each other.

Copycopy code to clipboard
1@Composable
2fun HomeScreen(navController: NavController) {
3    Column {
4        Text(text = "Home Screen")
5        Button(onClick = { navController.navigate("details") }) {
6            Text(text = "Go to Detail Screen")
7        }
8    }
9}
10
11@Composable
12fun DetailScreen(navController: NavController) {
13    Column {
14        Text(text = "Detail Screen")
15        Button(onClick = { navController.popBackStack() }) {
16            Text(text = "Go back")
17        }
18    }
19}

In these examples, we are using the NavController object to navigate between different screens in our app. The HomeScreen has a button that will navigate to the DetailScreen when clicked. The DetailScreen has a button that will go back to the previous screen when clicked and popBackStack is called.

By the way, it's best to define the route names as constants in a separate object. I'm just using "home" and "details" directly above so the example is easier to read!

That's it! You have now learned how to add simple navigation to your Jetpack Compose project using the Navigation component.

Summary

• The NavHost component is a part of the Jetpack library that provides support for navigating between different screens in your app.
• You can create a NavHost composable function that will act as the container for your app's screens.
• You can create individual screens for your app and use the NavController object to navigate between them.
• The startDestination parameter specifies the screen that should be displayed when the app is launched.
• You can use the NavController object to navigate between different screens in your app.