Country Code Picker in Jetpack Compose

If you are looking for a country code picker library for jetpack compose then I would recommend a library developed by Tolga Caglayan. Let’s see the main features of the library and how to implement this.

Features

• Country number hints
• Phone number visual transformation (Automatic number formatting)
• Automatic country recognition (detected by sim card if sim card is inserted)
• With inbuilt textfield
• Text Field is customizable
• Language translations
• Inbuilt clear button
• New dialog picker

Supported languages

• Hindi
• English
• Turkish
• Italian
• Arabic
• Russian
• Dutch

How to add to your project

Step 1.

In the build.gradle file at the project level or in the newer version of android studio, in settings.gradle file at the project level, add maven central repository.

  repositories {
    maven { url 'https://jitpack.io' }
}

Step 2.

Add the latest version of the dependency in build.gradle file at the application level.

  dependencies {
	    implementation 'com.github.togisoft:jetpack_compose_country_code_picker:1.1.4'
	}  

Now press the sync button in your build.gradle. And now you can access it in your code. Let’s see how

Implementation

Similar to the default text field of jetpack compose, this library’s function name TogiCountryCodePicker also takes two default parameters named text and onValueChange. If you are not familiar with Text Field then I would recommend you to go through this blog on textfield.

Default function parameters

@Composable
fun TogiCountryCodePicker(
    modifier: Modifier = Modifier,
    text: String,
    onValueChange: (String) -> Unit,
    shape: Shape = RoundedCornerShape(24.dp),
    color: Color = MaterialTheme.colors.background,
    showCountryCode: Boolean = true,
    showCountryFlag: Boolean = true,
    focusedBorderColor: Color = MaterialTheme.colors.primary,
    unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
    cursorColor: Color = MaterialTheme.colors.primary,
    bottomStyle: Boolean = false
)

Default Style

@Composable
fun CountryCodePickerFunction() {
    var enteredText by remember {
        mutableStateOf("")
    }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TogiCountryCodePicker(text = enteredText, onValueChange = { enteredText = it })
    }
}

Styling

A parameter named bottomStyle of type Boolean will help you to manipulate county name outside and inside of textfield.

@Composable
fun CountryCodePickerFunction() {
    var enteredText by remember {
        mutableStateOf("")
    }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TogiCountryCodePicker(
            text = enteredText,
            onValueChange = { enteredText = it },
            bottomStyle = true

        )
    }
}

Disable country code and flag

@Composable
fun CountryCodePickerFunction() {
    var enteredText by remember {
        mutableStateOf("")
    }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TogiCountryCodePicker(
            text = enteredText,
            onValueChange = { enteredText = it },
            bottomStyle = true,
            showCountryCode = false
        )
    }
}

@Composable
fun CountryCodePickerFunction() {
    var enteredText by remember {
        mutableStateOf("")
    }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TogiCountryCodePicker(
            text = enteredText,
            onValueChange = { enteredText = it },
            bottomStyle = true,
            showCountryFlag = false
        )
    }
}

Example

@Composable
fun CountryCodePickerFunction() {
    var enteredText by remember { mutableStateOf("") }
    var fullPhoneNumber by remember { mutableStateOf("") }
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TogiCountryCodePicker(
            text = enteredText,
            onValueChange = { enteredText = it },
            bottomStyle = true
        )
        Button(onClick = {
            fullPhoneNumber = if (!isPhoneNumber()){
                getFullPhoneNumber()
            }else{
                "Error"
            }
        }) {
            Text(text = "Send")
        }
        Text(text = "Phone Number with country Code", fontSize = 22.sp)
        Text(text = fullPhoneNumber, fontSize = 32.sp)
    }
}

Let’s discuss the above code and video. We created two parameters of type String named enteredText and fullPhoneNumber using remember API of jetpack compose so that text stored in these variables can survive recomposition. The earlier one store user entered text and later one store number with country code when we call getFullPhoneNumber() in the callback function of button.

In the button’s callback function, we don’t use if statement then we can’t use the error functionalities of textfield provided by the library. In the button section, isPhoneNumber() helps us to determine the textfield is empty or not and country code like +91 is already added to the number already or not.

Project made with country code picker

I have used this library in my project WhatsDrop which is a simple application that is used to send messages to unknown numbers without saving them in the phonebook. Initially, I made this application for personal use then I published it on the play store because there are many apps with the same functionalities but all of them show advertisements.