This post is about how to navigate between different composable using the Navigation component with Jetpack compose.
Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app. Android Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.
The Navigation component provides support for Jetpack Compose applications. You can navigate between composables while taking advantage of the Navigation component’s infrastructure and features.
Creating new project
1 . Create a new project by going to File ⇒ New Android Project, select Empty Compose Activity, provide app name and then finally click on finish.
2 . Open app-level build.gradle file and under the dependencies section add the below libraries and then sync the project:
build.gradle
dependencies {
//navigation with compose
implementation("androidx.navigation:navigation-compose:2.4.2")
}
Get the latest navigation-compose dependency from here.
Basically, there are two main parts of a Jetpack Compose Navigation:
- NavController
- NavHost
NavController
The NavController is the central API for the Navigation component.
It is stateful and keeps track of the back stack of composables that make up the screens in your app and the state of each screen. So to navigate to any destination, we need to use the NavController.
To create a NavController, you can use rememberNavController() method in your composable:
//creating navController instance
val navController = rememberNavController()
NavHost
The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between.
As you navigate between composables, the content of the NavHost is automatically recomposed.
Each NavController must be associated with a single NavHost composable.
Each composable destination in your navigation graph is associated with a route ( String that defines the path to your composable).
Creating the NavHost requires the NavController and the route of the starting destination of your graph.
You can add to your navigation structure by using the composable() method. This method requires that you provide a route and the composable that should be linked to the destination:
//creating a NavHost
NavHost(
navController = navController,
startDestination = "first_screen"
) {
composable("first_screen") {
FirstScreen(navController = navController)
}
composable("second_screen") {
SecondScreen(navController = navController)
}
composable("third_screen") {
ThirdScreen(navController = navController)
}
}
Navigate to a composable
To navigate to a composable destination in the navigation graph, you must use the navigate() method.
The navigate() takes a single String parameter that represents the destination’s route.
To navigate from a composable within the navigation graph, call navigate():
Button(
onClick = {
//navigate to third screen
navController.navigate("third_screen")
}
)
The Complete MainActivity code
MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeNavigationExpTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
MainScreen()
}
}
}
}
}
@Composable
fun MainScreen() {
//creating navController instance
val navController = rememberNavController()
//creating a NavHost
NavHost(
navController = navController,
startDestination = "first_screen"
) {
//You can add to your navigation structure by using the composable() method.
//This method requires that you provide a route and the composable that should be linked to the destination.
composable("first_screen") {
FirstScreen(navController = navController)
}
composable("second_screen") {
SecondScreen(navController = navController)
}
composable("third_screen") {
ThirdScreen(navController = navController)
}
}
}
@Composable
fun FirstScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "First Screen",
fontSize = 40.sp,
color = Color.Blue,
fontWeight = FontWeight.Bold
)
Button(
shape = RoundedCornerShape(8.dp),
modifier = Modifier.padding(all = Dp(8F)),
onClick = {
// navigate to second screen
navController.navigate("second_screen")
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Blue,
contentColor = Color.White
)
)
{
Text(text = "Go to Second Screen", fontSize = 25.sp)
}
}
}
@Composable
fun SecondScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Second Screen",
fontSize = 40.sp,
color = Color.Magenta,
fontWeight = FontWeight.Bold
)
Button(
shape = RoundedCornerShape(8.dp),
modifier = Modifier.padding(all = Dp(8F)),
onClick = {
//navigate to third screen
navController.navigate("third_screen")
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Magenta,
contentColor = Color.White
)
)
{
Text(text = "Go to Third Screen", fontSize = 25.sp)
}
}
}
@Composable
fun ThirdScreen(navController: NavController) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Third Screen",
fontSize = 40.sp,
color = Color.Red,
fontWeight = FontWeight.Bold
)
Button(
shape = RoundedCornerShape(8.dp),
modifier = Modifier.padding(all = Dp(8F)),
onClick = {
// navigate to first screen
navController.navigate("first_screen")
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.White
)
)
{
Text(text = "Go to First Screen", fontSize = 25.sp)
}
}
}
When you run the app it will look like this:
