Step by Step Guide to Setup AndroidX Compose Navigation: Part 1

Step by Step Guide to Setup AndroidX Compose Navigation: Part 1

Apr 13, 2024·

3 min read

We’ll discuss how to setup Compose Navigation by using Google’s navigation library.

We will be exploring only the AndroidX compose library, but there are many other open source libraries, I will link it here once I publish the article about that.

Quick note:

  • We will be using single activity architecture for this article, navigation between Composables.

  • I will write a separate article about discussing what is single activity and multiple activity architecture.

This will be the part 1 of "AndroidX Compose Navigation" Series.

Part 2 is published here:

I’ll build the navigation using Intents without using Library, then I’ll recreate using Compose Navigation.

What we are going to build?

We will build a simple Navigation setup using AndroidX Compose Navigation library.

We will have two screens: FirstScreen and SecondScreen. From first screen user can click the “Navigate to Second screen” button, to navigate to Second Screen.

Pretty Simple example!!

I have build the same flow using two Activities, and navigating using Intent, No libraries, Just Good Old Intents.

But this is the not the article about Intents with Multi Activity vs Single activity. I’ll be using the Intent example to compare it with Compose example.

The code for the above Intent navigation is added here:

Let’s recreate the same in Compose using AndroidX Compose Navigation Library.

Simple Navigation using Compose Navigation:

We will start with adding the dependency required for Compose navigation.

// At the time of writing, the latest version is 2.7.7

Since we are using Composables as separate Screens, we will not create multiple activities. Single Activity, Multiple Screen Composables.

In the MainActivity class inside setContent add a NavHost.

This NavHost is kind of a Navigation Orchestrator. The NavHost needs a NavController and using rememberNavController we can get NavController instance.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setContent {
            AndroidXComposeNavigationTheme {
                val navController = rememberNavController()
                NavHost(navController = navController) {


Right!, Now we need to add Destinations into the NavHost. Each destination should have a unique destination id.

Basically mapping a key with a composable.

I can also pass the initial destination id.

NavHost(navController = navController, startDestination = "home") {
    composable("home") {
    composable("second") {

Code for FirstScreen and SecondScreen:

Now using the navController we can navigate to other Destinations.

FirstScreen {
    navController.navigate("second") // Pass the destination id

Now Run…

Nice Smooth Animation out of the box!!!

Same as Intent Example, from the Second Screen you can press back to go back to First Screen.

Source Code

That’s it for the Part 1.

In Part 2 we will be smashing some common bug.

Part 2: