Creating Jetpack Compose Navigation and Submitting Arguments.

Tolga Caglayan — Tue, 05 Apr 2022 09:25:08 +0000

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.

Then we create our Folders and Files.

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")
            }
        }
    }
}

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")
                }
            }
        }
    }
}

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)
            }
        }
    }
}

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
            )
        }
    }
}

We edit our MainActivity file and run the program.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DevToTheme {
                Navigation()
            }
        }
    }
}

*** Final**

Jetpack Compose Country Code Picker

Tolga Caglayan — Sun, 03 Apr 2022 16:09:08 +0000

I really enjoyed developing applications with Jetpack Compose. I was looking for the Country Code Selector package. When I couldn't find it, I decided to prepare it myself. You may need it in your future project.. That's why I wanted to share it with you.

Link : Github

Highlights

Country numbers hints
Phone number visualTransformation (Automatic number formatting)
Automatic country recognition (detection by sim card if sim card is inserted)
With TextField
Can Customize
Adding language translations
Number verification added

*Example : *



@Composable
   fun SelectCountryWithCountryCode() {
        val getDefaultLangCode = getDefaultLangCode() // Auto detect language
        val getDefaultPhoneCode = getDefaultPhoneCode() // Auto detect phone code : +90
        var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode) }
        val phoneNumber = rememberSaveable { mutableStateOf("") }
        var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode) }
        var verifyText by remember { mutableStateOf("") }
        var isValidPhone by remember { mutableStateOf(true) }
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(
                text = verifyText,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(Alignment.Center)
            )
            TogiCountryCodePicker(
                pickedCountry = {
                    phoneCode = it.countryPhoneCode
                    defaultLang = it.countryCode
                },
                defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
                focusedBorderColor = MaterialTheme.colors.primary,
                unfocusedBorderColor = MaterialTheme.colors.primary,
                dialogAppBarTextColor = Color.Black,
                dialogAppBarColor = Color.White,
                error = isValidPhone,
                text = phoneNumber.value,
                onValueChange = { phoneNumber.value = it }
            )

            val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
            val checkPhoneNumber = checkPhoneNumber(
                phone = phoneNumber.value,
                fullPhoneNumber = fullPhoneNumber,
                countryCode = defaultLang
            )
            Button(
                onClick = {
                    verifyText = if (checkPhoneNumber) {
                        isValidPhone = true
                        "Phone Number Correct"
                    } else {
                        isValidPhone = false
                        "Phone Number is Wrong"

                    }
                },
                modifier = Modifier.fillMaxWidth()
                    .padding(16.dp)
                    .height(60.dp)
            ) {
                Text(text = "Phone Verify")
            }
        }
      }
    }

DEV Community: Tolga Caglayan

Creating Jetpack Compose Navigation and Submitting Arguments.

Jetpack Compose Country Code Picker