Jetpack Compose Country Code Picker
Tolga Caglayan
Posted on April 3, 2022
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")
}
}
}
}
💖 💪 🙅 🚩
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.