Navigation In Jetpack Compose

What do we mean by Navigation?

Navigation in mobile app development simply means navigating or directing user from one screen to another screen by clicking through a specific clickable object.

If you are coming from java and xml you have used Intent’s to direct user from one screen to another. That’s ofcourse more easier way. But don’t worry i will show you how to do that using navigation dependency(library) in Jetpack compose in as simpler was as possible.

Let’s Begin with adding navigation dependency in your build.gradle(:app) add this dependency:

implementation "androidx.navigation:navigation-compose:2.4.0-beta01"

NOTE: When you will add this dependency it will recommend to update the dependency to version 2.7.0 but i will not recommend to update it because when you will update and run it you’ll get duplicate class error. So use the older version until the issue get’s solved from android team.

This is the file structure. I have created Navigation_Screen for all the navigation handlers. Home_screen and Detail_screen for storing their respective contents.

Navigation_Screen.kt

@Composable
fun Navigating_Screen() {
    val navController= rememberNavController()
    Surface(modifier = Modifier.fillMaxSize()) {
        NavHost(
            navController = navController,
            startDestination = "home"
        ){
            composable("home"){
                Home_Screen2( navController)
            }
            composable("screen2"){
                detail_Screen3()
            }
        }
    }
}

In this we have first created navController and initiated rememberNavController so it remembers the first screen or the default screen. After that inside the surface part we created the NavHost to host and handle the navigation process. NavHost contains navController and startDestination. We have provided the route(route is basically like a address that tells the composable function that you have to navigate screen from this to this). as a “home”. After that we have to define the composable that we need to navigate. So in this we have two composable Home_screen and detail_screen that we need to navigate. And each composable section contains route.

Home_Screen.kt

@Composable
fun Home_Screen2(navController: NavController) {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment =Alignment.CenterHorizontally
            ) {
            Text(text = "Home_Screen")
            Spacer(modifier = Modifier.height(10.dp))
            Button(onClick = { navController.navigate("screen2")}) {
                Text(text = "Detail screen")
            }
        }
    }
}

In the Home_Screen we need to pass navController as parameter to navigate the screen. Here we have just set text and a button as a example. Your code may contain more functionalities than this. We have to navigate the screen whenever we click on the button. So in onClick function in Button we have used the navController.navigate function to change the screen and also provided the route to it so it knows in which screen it has to be navigate.

Detail_Screen.kt

@Composable
fun detail_Screen3() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Text(text = "Welcome to the detail screen")
    }
}

In the detail_Screen we have just added simple text that prints “Welcome to the detail screen”.

MainActivity.kt

lass MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Naivgation_mediumTheme {
                Navigating_Screen()
            }
        }
    }
}

in MainActivity just add the Naigating_Screen() composable function and that’s it you have to do it for navigation.

Output before clicking on the button

Output After clicking on the button

Thank you for reading. If you haven’t saw my blogs related to Dagger-hilt and state management do check out by clicking on my profile. We will come with another Jetpack Compose blog. Till than happy coding guys 🥰.