mbaujames / KomposeCountryCodePicker

Kompose Country Code Picker is a Jetpack Compose library based on Material 3 (M3) that provides a country code picker for Android apps.

Kompose Country Code Picker

Kompose Country Code Picker is a Jetpack Compose library based on Material 3 (M3) that provides a country code picker for Android apps.

Preview

Picker	Dialog	Picker Only

Requirements

Jetpack compose material three dependency - implementation("androidx.compose.material3:material3:1.1.1")

Setup

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

Dependency

Add the following to your build.gradle dependencies:

dependencies {
    implementation("com.github.JoelKanyi:KomposeCountryCodePicker:<version>")
}

Usage

val phoneNumber = rememberSaveable { mutableStateOf("") }

KomposeCountryCodePicker(
    modifier = Modifier
        .fillMaxWidth(),
    text = phoneNumber.value,
    onValueChange = { phoneNumber.value = it },
    placeholder = { Text(text = "Phone Number") },
    shape = MaterialTheme.shapes.medium,
    colors = TextFieldDefaults.colors(
        unfocusedContainerColor = Color.Transparent,
        focusedContainerColor = Color.Transparent,
    ),
)

KomposeCountryCodePicker Composable without TextField

With the showOnlyCountryCodePicker parameter set to true, the KomposeCountryCodePicker composable can be used without the TextField composable but you can't use all methods. You can only use the following methods:

• CountryCodePicker.getCountryPhoneCodeWithoutPrefix()
• CountryCodePicker.getCountryPhoneCode()
• CountryCodePicker.isPhoneNumberValid(<combinedPhone>) - You will need to manually combine the country code and phone number

KomposeCountryCodePicker(
    modifier = Modifier,
    showOnlyCountryCodePicker = true,
    showCountryFlag = false,
)

Integration with TextField

val phoneNumber = rememberSaveable { mutableStateOf("") }

TextField(
    modifier = Modifier
        .fillMaxWidth(),
    value = phoneNumber.value,
    onValueChange = { phoneNumber.value = it },
    placeholder = { Text(text = "Phone Number") },
    leadingIcon = {
        KomposeCountryCodePicker(
            modifier = Modifier,
            showOnlyCountryCodePicker = true,
            showCountryFlag = false,
        )
    },
    colors = TextFieldDefaults.colors(
        unfocusedContainerColor = Color.Transparent,
        focusedContainerColor = Color.Transparent,
    ),
)

KomposeCountryCodePicker Composable customizations

Customization	Description
limitedCountries	Limits the list of countries to be displayed in the country code picker by specify the country codes, country names or country phone codes
placeholder	Sets the placeholder Composable for the country code picker
shape	Sets the shape of the country code picker TextField
showCountryCode	Shows the country code in the country code picker TextField
showCountryFlag	Shows the country flag in the country code picker TextField
error	Sets the error state on the TextField for the country code picker
colors	Sets the colors for the country code picker TextField
showOnlyCountryCodePicker	Shows only the country code picker without the TextField

Available methods

Description	Method
Country Phone No Code	CountryCodePicker.getCountryPhoneCodeWithoutPrefix()
Prefixed Country Phone No Code	CountryCodePicker.getCountryPhoneCode()
Country Name	CountryCodePicker.getCountryName()
Country Language Code	CountryCodePicker.getCountryCodeWithoutPrefix()
Phone Number	CountryCodePicker.getPhoneNumber()
Phone Number Without Prefix	CountryCodePicker.getPhoneNumberWithoutPrefix()
Full Phone Number	CountryCodePicker.getFullPhoneNumber()
Full Phone Number Without Prefix	CountryCodePicker.getFullPhoneNumberWithoutPrefix()
Phone Number State	CountryCodePicker.isPhoneNumberValid()

Contributing

Please fork this repository and contribute back using pull requests.

Any contributions, large or small, major features, bug fixes, are welcomed and appreciated but will be thoroughly reviewed.

License

Copyright 2023 Joel Kanyi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.