
<p>This post is about how to pass arguments/data between composable destinations and add optional arguments using Navigation compose.</p> 
 
 
 
<p>Let&#8217;s understand how to pass data between composable destinations and add optional arguments with the help of examples.</p> 
<h4><span style="color: #000080;"><strong>Creating New Project</strong></span></h4> 
<p>1 . Create a new project by going to <strong>File ⇒ New Android Project</strong>, select <strong>Empty Compose Activity</strong>, provide <strong>app</strong> name and then finally click on <strong>finish</strong>.</p> 
<p>2 . Open app-level build.gradle file and under the <strong>dependencies</strong> section add the below library and then <strong>sync</strong> the project<strong>:</strong></p> 
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p> 
<pre>dependencies {<br /><span style="color: #008000;"> <strong>//navigation with compose</strong></span><br /> implementation("androidx.navigation:navigation-compose:2.4.2")<br />}</pre> 
<p>Get the latest navigation-compose dependency from <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://developer.android.com/jetpack/compose/navigation#setup">here</a></strong></span>.</p> 
<p>3. Passing data from First Screen composable to Second Screen composable.</p> 
<pre>@Composable<br />fun FirstScreen(navController: NavController) {<br /> Button(<br /> onClick = {<br /><strong><span style="color: #008000;"> // this will navigate to second screen</span></strong><br /><span style="color: #0000ff;"> <strong> navController.navigate("second_screen/Second Screen")</strong></span><br /> } <br /> )<br /> {<br /> Text(text = "Go to Second Screen", fontSize = 25.sp)<br /> }<br />}</pre> 
<p>4. Retrieving data passed from First Screen composable in the composable() function of route <strong><span style="color: #0000ff;">second_screen</span></strong> and pass it as a parameter to Second Screen composable.</p> 
<pre>@Composable<br />fun MainScreen() {<br /> val navController = rememberNavController()<br /><br /> NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br /> ) {<br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> /*<br /><strong><span style="color: #008000;"> //By default, all arguments are parsed as strings. </span></strong><br /> composable(<br /><strong> "second_screen/{title}"</strong><br /> ) {<br /> SecondScreen(navController = navController, <strong>it.arguments?.getString("title")</strong>)<br /> }*/<br /><strong><span style="color: #0000ff;"> //OR</span></strong> <br /><strong><span style="color: #008000;"> //You can specify another type by using the arguments parameter to set a type.</span></strong><br /> composable(<br /> <strong>"second_screen/{title}"</strong>,<br /> <strong> arguments = listOf(navArgument("title")</strong><br /><strong> {</strong><br /><strong> type = NavType.StringType</strong><br /><strong> })</strong><br /> ) {<br /> SecondScreen(navController = navController, <strong>it.arguments?.getString("title")</strong>)<br /> }<br /> }<br />}</pre> 
<p>5. Using data passed as a parameter to Second Screen composable.</p> 
<pre>@Composable<br />fun SecondScreen(navController: NavController,<strong> title: String?</strong>) {<br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /><span style="color: #0000ff;"><strong> text = title.toString(),</strong></span><br /> fontSize = 40.sp,<br /> color = Color.Magenta,<br /> fontWeight = FontWeight.Bold<br /> )<br /> Button(<br /> onClick = {<br /><strong><span style="color: #008000;"> // this will navigate to first screen</span></strong><br /> navController.navigate("first_screen")<br /> } <br /> )<br /> {<br /> Text(text = "Go to First Screen", fontSize = 25.sp)<br /> }<br /> }<br />}</pre> 
<h4><span style="color: #000080;"><strong>Complete MainActivity code</strong></span></h4> 
<p>6. The below MainActivity file shows you how to pass string data from the First screen composable to the Second screen composable using Navigation compose.</p> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>class MainActivity : ComponentActivity() {<br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposePassArgumentExpTheme {<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 /> val navController = rememberNavController()<br /><br /> NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br /> ) {<br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> composable(<br /> "second_screen/{title}",<br /> arguments = listOf(navArgument("title")<br /> {<br /> type = NavType.StringType<br /> })<br /> ) {<br /> SecondScreen(navController = navController, it.arguments?.getString("title"))<br /> }<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;"> // this will navigate to second screen</span></strong><br /> navController.navigate("second_screen/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 /><br />@Composable<br />fun SecondScreen(navController: NavController, title: String?) {<br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /> text = title.toString(),<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;"> // this will navigate to first screen</span></strong><br /> navController.navigate("first_screen")<br /> },<br /> colors = ButtonDefaults.buttonColors(<br /> backgroundColor = Color.Magenta,<br /> contentColor = Color.White<br /> )<br /> )<br /> {<br /> Text(text = "Go to First Screen", fontSize = 25.sp)<br /> }<br /> }<br />}</pre> 
<h4><span style="color: #000080;"><strong>Adding optional arguments</strong></span></h4> 
<p>Navigation Compose also supports optional navigation arguments. Optional arguments differ from required arguments in two ways:</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>
 
<ul> 
<li>They must be included using query parameter syntax (&#8220;?argName={argName}&#8221;)</li> 
<li>They must have a defaultValue set, or have nullability = true (which implicitly sets the default value to null)</li> 
</ul> 
<p>7. Passing optional data from First Screen composable to Second Screen composable.</p> 
<pre>@Composable<br />fun FirstScreen(navController: NavController) {<br /> Button(<br /> onClick = {<br /><strong><span style="color: #008000;"> // this will navigate to second screen</span></strong><br /><span style="color: #0000ff;"> <strong>navController.navigate("second_screen?title = Second Screen")</strong></span><br /> } <br /> )<br /> {<br /> Text(text = "Go to Second Screen", fontSize = 25.sp)<br /> }<br />}</pre> 
<p>8. Retrieving optional data passed from First Screen composable in the composable() function of route <strong><span style="color: #0000ff;">second_screen</span></strong> and pass it as a parameter to Second Screen composable. You must have some default value, in case, if there is no argument passed to the destination, the defaultValue of &#8220;Second Screen&#8221; will be used instead.</p> 
<pre>@Composable<br />fun MainScreen() {<br /> val navController = rememberNavController()<br /><br /> NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br /> ) {<br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> <br /> composable(<br /> <strong><span style="color: #0000ff;">"second_screen?title={title}"</span></strong>,<br /> arguments = listOf(navArgument("title")<br /> {<br /> type = NavType.StringType<br /> <strong><span style="color: #0000ff;">defaultValue = "Second Screen"</span></strong><br /> })<br /> ) {<br /> SecondScreen(navController = navController, <strong><span style="color: #0000ff;">it.arguments?.getString("title")</span></strong>)<br /> }<br /> }<br />}</pre> 
<h4><strong><span style="color: #000080;">Complete MainActivity code</span></strong></h4> 
<p>9. The below MainActivity file shows you how to pass optional string data from the First screen composable to the Second screen composable using Navigation compose.</p> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>class MainActivity : ComponentActivity() {<br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposePassArgumentExpTheme {<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 /> val navController = rememberNavController()<br /><br /> NavHost(<br /> navController = navController,<br /> startDestination = "first_screen"<br /> ) {<br /> composable("first_screen") {<br /> FirstScreen(navController = navController)<br /> }<br /> composable(<br /> <strong>"second_screen?title={title}",</strong><br /><strong> arguments = listOf(navArgument("title")</strong><br /><strong> {</strong><br /><strong> type = NavType.StringType</strong><br /><strong> defaultValue = "Second Screen"</strong><br /><strong> })</strong><br /> ) {<br /><br /> SecondScreen(navController = navController,<strong> it.arguments?.getString("title")</strong>)<br /> }<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;"> // this will navigate to second screen</span></strong><br /><strong> navController.navigate("second_screen?title = Second Screen")</strong><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 /><br />@Composable<br />fun SecondScreen(navController: NavController,<strong><span style="color: #008000;"> title: String?</span></strong>) {<br /> Column(<br /> modifier = Modifier.fillMaxSize(),<br /> verticalArrangement = Arrangement.Center,<br /> horizontalAlignment = Alignment.CenterHorizontally<br /> ) {<br /> Text(<br /> text = title.toString(),<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;"> // this will navigate to first screen</span></strong><br /> navController.navigate("first_screen")<br /> },<br /> colors = ButtonDefaults.buttonColors(<br /> backgroundColor = Color.Magenta,<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="293" height="634" /> <img class="alignnone wp-image-3268" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-29-21-53-56-369_com.c1ctech.jetpackcomposepassargumentexp1-473x1024.png" alt="" width="293" height="634" /></p> 
<p> ;</p> 
<p> ;</p> 
 
 
 
<p> ;</p>