DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Creating Jetpack Compose Navigation and Submitting Arguments.
Tolga Caglayan
Tolga Caglayan

Posted on

Creating Jetpack Compose Navigation and Submitting Arguments.

Hello everyone. I'm Tolga Caglayan. Today I'm going to show you with an example how you can work with Jetpack Compose Navigation.Jetpack Compose is an emerging technology. Sometimes we have trouble finding information on how to use certain things. That's why I felt the need to write an article about how to use Navigation.

So let's start.

Sample Application : https://github.com/togisoft/JetpackNavigationExample

  • First of all, we add the navigation package to the Jetpack Compose project that we have created.

Image description

  • Then we create our Folders and Files.

Image description

  • We create a sealed class for the route in Screen.kt in the State Folder.
sealed class Screen(val route: String) {
    object HomeScreen : Screen(route ="home")
    object DetailScreen : Screen(route = "detail")

    // To send multiple arguments
    fun withArgs(vararg args: String): String {
        return buildString {
            append(route)
            args.forEach { arg ->
                append("/$arg")
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • We create our codes for HomeScreen
@Composable
fun HomeScreen(navController: NavController) {
    var name by remember { mutableStateOf("") }
    var surname by remember { mutableStateOf("") }
    val context = LocalContext.current

    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Home Screen") })
        }
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                OutlinedTextField(
                    value = name,
                    label = { Text(text = "Name") },
                    onValueChange = { name = it },
                    modifier = Modifier.padding(vertical = 16.dp)
                )
                OutlinedTextField(
                    value = surname,
                    label = { Text(text = "Surname") },
                    onValueChange = { surname = it },
                    modifier = Modifier.padding(vertical = 16.dp)
                )
                Button(onClick = {
                   // Check if textfields are null
                    if (name.isNotEmpty()) {  
//With route arguments for Detail Screen.                  navController.navigate(Screen.DetailScreen.withArgs(name, surname))
                    } else {
                        Toast.makeText(context, "Fill in the required fields.", Toast.LENGTH_SHORT)
                            .show()
                    }
                }) {
                    Text(text = "Send Detail Screen")
                }
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • We create our codes for DetailScreen
@Composable
fun DetailScreen(name: String?, surname: String?, navController: NavController) {

    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Detail Screen") }, navigationIcon = {
                IconButton(
                    onClick = {
                        navController.popBackStack()
                    }) {
                    Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "posStackBack")
                }
            })
        }
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Hello $name $surname", fontWeight = FontWeight.Bold)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Now we create the Navigation
@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.HomeScreen.route) {
        composable(route = Screen.HomeScreen.route) {
            HomeScreen(navController = navController)
        }
        composable(route = Screen.DetailScreen.route + "/{name}/{surname}",
            arguments = listOf(
                navArgument("name") {
                    type = NavType.StringType
                    nullable = false
                },
                navArgument("surname") {
                    type = NavType.StringType
                    nullable = false
                }
            )
        ) { entry ->
            DetailScreen(
                name = entry.arguments?.getString("name"),
                surname = entry.arguments?.getString("surname"),
                navController = navController
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  • We edit our MainActivity file and run the program.
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DevToTheme {
                Navigation()
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

*** Final**

Image description

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.