DEV Community

Cover image for Jetpack Compose Country Code Picker
Tolga Caglayan
Tolga Caglayan

Posted on

 

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

Top comments (0)

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

Sorry, it's true.