Understand Jetpack Compose Navigation in 3 Minutes

Quick guide for navigation between composables in a Compose project

Photo by Guido Coppa on Unsplash

With the introduction of Jetpack Compose’s Navigation, there is no need for Fragments or Navigation Graphs with menus. A simple, intuitive way to handle displaying pages on the user’s device — much like routes in a React project.

Setup

Start a New Project with an Empty Compose Activity and add the following dependency to your build.gradle app file:

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.2"
}

Basic Idea

Each screen is identified with a route and this route is used to navigate between pages on the user’s device.

We will have 2 screens for this tutorial:

1. “home” — for the main screen, a text field and a button.
2. “second/{content}” — second screen which will accept a compulsory String that we will display along with a button.

Source: Author designed with Adobe XD

Setting up the NavHost

To start with Navigation in Jetpack Compose, we have to use the NavHost composable.

val navController = rememberNavController()
NavHost(
  navController = navController,
  startDestination = "home"
) { TODO("not yet implemented") }

Creating two screens

When you are dealing with Navigation in Kotlin, it is a good practice to pass the navController as a function parameter.

Configuring the Screens

Now that we have our two screens set up, we need to configure them with the routes and arguments we are passing.

And that’s it! Run your program and you’ve successfully learned Compose Navigation in 3 minutes.

I hope you enjoyed reading my article and learned something today. Thank you!

Want to connect?
My GitHub profile
My LinkedIn page