
<p>This post is about how to navigate between different composable using the Navigation component with Jetpack compose.</p> 
<p><span style="color: #008000;"><strong>Navigation</strong></span> 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&#8217;s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.</p> 
<p>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.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #140466;" href="https://github.com/arunk7839/JetpackComposeNavigationExp"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
 
 
 
<h3> </h3> 
<h4><span style="color: #000080;"><strong>Creating new project</strong></span></h4> 
<p>1 . Create a new project by going to <span style="color: #008000;"><strong>File ⇒ New Android Project</strong></span>, select <span style="color: #008000;"><strong>Empty Compose Activity</strong></span>, provide <span style="color: #008000;"><strong>app</strong></span> name and then finally click on <span style="color: #0000ff;"><strong>finish</strong></span>.</p> 
<p>2 . Open app-level build.gradle file and under the <span style="color: #008000;"><strong>dependencies</strong></span> section add the below libraries and then sync the project<strong>:</strong></p> 
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p> 
<pre>dependencies {<br /> <strong><span style="color: #008000;">//navigation with compose</span></strong><br /> implementation("androidx.navigation:navigation-compose:2.4.2")<br />}</pre> 
<p>Get the latest navigation-compose dependency from <strong><a href="https://developer.android.com/jetpack/compose/navigation#setup">here</a></strong>.</p> 
<p>Basically, there are two main parts of a Jetpack Compose Navigation:</p> 
<ul> 
<li>NavController</li> 
<li>NavHost</li> 
</ul> 
<h4> </h4> 
<h4><span style="color: #000080;"><strong>NavController</strong></span></h4> 
<p>The <span style="color: #008000;"><strong>NavController</strong></span> is the central API for the Navigation component.</p> 
<p>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.</p> 
<p>To create a NavController, you can use <strong><span style="color: #008000;">rememberNavController()</span></strong> method in your composable:</p> 
<pre><strong><span style="color: #008000;">//creating navController instance</span></strong><br />val navController = rememberNavController()</pre> 
<h4> </h4> 
<h4><strong><span style="color: #000080;">NavHost</span></strong></h4> 
<p>The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between.</p> 
<p>As you navigate between composables, the content of the NavHost is automatically <a href="https://developer.android.com/jetpack/compose/mental-model#recomposition"><span style="color: #0000ff;"><strong>recomposed</strong></span></a>.</p> 
<p>Each NavController must be associated with a single NavHost composable.</p> 
<p>Each composable destination in your navigation graph is associated with a route ( String that defines the path to your composable).</p> 
<p>Creating the NavHost requires the NavController and the route of the starting destination of your graph.</p> 
<p>You can add to your navigation structure by using the <span style="color: #008000;"><strong>composable()</strong></span> method. This method requires that you provide a route and the composable that should be linked to the destination:</p> 
<pre><span style="color: #008000;"><strong>//creating a NavHost</strong></span><br />NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br />) {<br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> composable("second_screen") {<br /> SecondScreen(navController = navController)<br /> }<br /> composable("third_screen") {<br /> ThirdScreen(navController = navController)<br /> }<br />}</pre> 
<h4> </h4> 
<h4><strong><span style="color: #000080;">Navigate to a composable</span></strong></h4> 
<p>To navigate to a composable destination in the navigation graph, you must use the <span style="color: #008000;"><strong>navigate()</strong></span> method.</p> 
<p>The navigate() takes a single String parameter that represents the destination’s route.</p> 
<p>To navigate from a composable within the navigation graph, call navigate():</p> 
<pre>Button(<br /> onClick = {<br /> <strong><span style="color: #008000;">//navigate to third screen</span></strong><br /> navController.navigate("third_screen")<br /> }<br />)</pre> 
<h4> </h4> 
<h4><span style="color: #000080;"><strong>The Complete MainActivity code</strong></span></h4> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<pre>class MainActivity : ComponentActivity() {<br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposeNavigationExpTheme {<br /><strong><span style="color: #008000;"> // A surface container using the 'background' color from the theme</span></strong><br /> Surface(<br /> modifier = Modifier.fillMaxSize(),<br /> color = MaterialTheme.colors.background<br /> ) {<br /> MainScreen()<br /> }<br /> }<br /> }<br /> }<br />}<br /><br />@Composable<br />fun MainScreen() {<br /><br /><strong><span style="color: #008000;"> //creating navController instance</span></strong><br /> val navController = rememberNavController()<br /><br /><strong><span style="color: #008000;"> //creating a NavHost</span></strong><br /> NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br /> ) {<br /> <strong><span style="color: #008000;">//You can add to your navigation structure by using the composable() method.</span></strong><br /><strong><span style="color: #008000;"> //This method requires that you provide a route and the composable that should be linked to the destination.</span></strong><br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> composable("second_screen") {<br /> SecondScreen(navController = navController)<br /> }<br /> composable("third_screen") {<br /> ThirdScreen(navController = navController)<br /> }<br /> }<br />}<br /><br />@Composable<br />fun FirstScreen(navController: NavController) {<br /><br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /> text = "First Screen",<br /> fontSize = 40.sp,<br /> color = Color.Blue,<br /> fontWeight = FontWeight.Bold<br /> )<br /><br /> Button(<br /> shape = RoundedCornerShape(8.dp),<br /> modifier = Modifier.padding(all = Dp(8F)),<br /> onClick = {<br /><strong><span style="color: #008000;"> // navigate to second screen</span></strong><br /> navController.navigate("second_screen")<br /> },<br /> colors = ButtonDefaults.buttonColors(<br /> backgroundColor = Color.Blue,<br /> contentColor = Color.White<br /> )<br /> )<br /> {<br /> Text(text = "Go to Second Screen", fontSize = 25.sp)<br /> }<br /> }<br />}<br /><br />@Composable<br />fun SecondScreen(navController: NavController) {<br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /> text = "Second Screen",<br /> fontSize = 40.sp,<br /> color = Color.Magenta,<br /> fontWeight = FontWeight.Bold<br /> )<br /><br /> Button(<br /> shape = RoundedCornerShape(8.dp),<br /> modifier = Modifier.padding(all = Dp(8F)),<br /> onClick = {<br /><strong><span style="color: #008000;"> //navigate to third screen</span></strong><br /> navController.navigate("third_screen")<br /> },<br /> colors = ButtonDefaults.buttonColors(<br /> backgroundColor = Color.Magenta,<br /> contentColor = Color.White<br /> )<br /> )<br /> {<br /> Text(text = "Go to Third Screen", fontSize = 25.sp)<br /> }<br /> }<br />}<br /><br />@Composable<br />fun ThirdScreen(navController: NavController) {<br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /> text = "Third Screen",<br /> fontSize = 40.sp,<br /> color = Color.Red,<br /> fontWeight = FontWeight.Bold<br /> )<br /><br /> Button(<br /> shape = RoundedCornerShape(8.dp),<br /> modifier = Modifier.padding(all = Dp(8F)),<br /> onClick = {<br /><strong><span style="color: #008000;"> // navigate to first screen</span></strong><br /> navController.navigate("first_screen")<br /> },<br /> colors = ButtonDefaults.buttonColors(<br /> backgroundColor = Color.Red,<br /> contentColor = Color.White<br /> )<br /> )<br /> {<br /> Text(text = "Go to First Screen", fontSize = 25.sp)<br /> }<br /> }<br />}</pre> 
<p>When you run the app it will look like this:</p> 
<p><img class="alignnone wp-image-3255" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-28-21-16-45-802_com.c1ctech.jetpackcomposenavigationexp1-473x1024.png" alt="" width="247" height="535" /> <img class="alignnone wp-image-3256" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-28-21-16-53-456_com.c1ctech.jetpackcomposenavigationexp1-473x1024.png" alt="" width="246" height="532" /> <img class="alignnone wp-image-3257" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-28-21-16-59-695_com.c1ctech.jetpackcomposenavigationexp1-473x1024.png" alt="" width="245" height="530" /></p> 
<p> ;</p> 
<p> ;</p> 
<p> ;</p>