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: https://sanjaydev.tech/blog/step-by-step-guide-to-setup-androidx-compose-navigation-part-2-73f7d4bd3fcf
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: https://gist.github.com/SanjayDevTech/30453873212dda25f1c9b182549f0165
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.
implementation("androidx.navigation:navigation-compose:2.7.7")
// 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?) {
super.onCreate(savedInstanceState)
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") {
FirstScreen()
}
composable("second") {
SecondScreen()
}
}
Code for FirstScreen and SecondScreen: https://gist.github.com/SanjayDevTech/30453873212dda25f1c9b182549f0165#file-composables-kt
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
Repository: https://github.com/SanjayDevTech/compose-navigation-tutorial.
I have added the Screens in a separate
screensmodule.appmodule has the Compose Navigationoldappmodule has the Intent Navigation
That’s it for the Part 1.
In Part 2 we will be smashing some common bug.