Jetpack Compose Country Code Picker

caglayantolga

Tolga Caglayan

Posted on April 3, 2022

Jetpack Compose Country Code Picker

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


Enter fullscreen mode Exit fullscreen mode

Jetpack Compose Country Code Picker

Jetpack Compose Country Code Picker

Jetpack Compose Country Code Picker

💖 💪 🙅 🚩
caglayantolga
Tolga Caglayan

Posted on April 3, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Scaffold en Jetpack Compose
android Scaffold en Jetpack Compose

April 4, 2023