First of all, we need to add the navigation dependency in our app module build.gradle.kt
implementation("androidx.navigation:navigation-compose:2.8.3")
This is a traditional method to add the dependency. Lets do it in new method using version.toml file.
[version]
nav = "2.8.3"
[libraries]
navigation-compose={group="androidx.navigation", name="navigation-compose", version.ref="nav"}
app module build.gradle.kt
implementation(libs.navigation.compose)
Now sync the project
Lets create the screens. Suppose we have three screens named, "screena" , "sccreenb", "screenc",
create the composable function for the screens.
for screenA
@Composable
fun ScreenA(
navController: NavController
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Text(
text = "Screen A "
)
Button(
onClick = {
navController.navigate(route = "screenb")
}
) {
Text(
text = "GO to Screen B "
)
}
}
}
for screenB
@Composable
fun ScreenB(
navController: NavController
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Text(
text = "Screen B "
)
Button(
onClick = {
navController.navigate(route = "screenc")
}
) {
Text(
text = "GO to Screen C "
)
}
}
}
for screenC
@Composable
fun ScreenC(
navController: NavController
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Text(
text = "Screen C "
)
Button(
onClick = {
navController.popBackStack(route = "screena", inclusive = false)
}
) {
Text(
text = "GO to Screen A "
)
}
}
}
Notes to remember in these composables
* we have passed navcontroller to each screen
navcontroller is used to navigate from one screen to another screen
code to navigate from screen A to screeb B
navController.navigate(route = "screenb")
Here we have passed the route of screenb. This will navigate our screen from screena to screenb.
and the same code for screenb to screenc
* at screen C , the another function is used
navController.popBackStack(route = "screena", inclusive = false)
here we are poping all the screen from our stack and leaving the screena only since inclusive is true.
Lets know how this navigation is possible.
to make this navigation we need to create a navgraph.
navgraph:- it is a graph showing all the screen of our app. to create the navgraph we need to use the NavHost composable . in NavHost composablle it is mandatory to pass the navcontroller , also the route of our start screen is mandatory. lets create the navgraph.
@Composable
fun MainNavGraph(
navController: NavHostController
) {
NavHost(
navController = navController,
startDestination = "screena"
) {
composable(route = "screena") {
ScreenA(
navController = navController
)
}
composable(route = "screenb") {
ScreenB(
navController = navController
)
}
composable(route = "screenc") {
ScreenC(
navController = navController
)
}
}
}
POINTS TO KNOW:-
* all the screen have its unique route
* composable refers to screen
Final Step
create a navcontroller variable and lets connect it in mainActivity oncreate method
val navHostController = rememberNavController()
MainNavGraph(
navController = navHostController
)
.... Lets move on to new method of navigation -----
0 Comments