How to add a country code picker in Android studio Kotlin

What is a country code picker

CCP is an Android UI Component that allows users to select a country, country code, country name, flag, and many more in one tab. international phone📱📱 code and it also gives for searching CCP. There is also a country code picker spinner.

It is used mostly when we build an app that works in many countries.

After implementation, on the left side, you will country flag 🚩, on the right side you will see the country code and in the middle, you will see the country short name.

I have used country code picker(CCP) in many apps it’s too easy to implement in the app. To implement it we need dependency and Code Piker View

1. Create a new Project.

2 . Add dependency in App >Gradle Scripts> build.gradle

Now SDK version has been updated

compileSdk 33
targetSdk 33

So kindly use

implementation 'com.hbb20:ccp:2.5.1'

Pest this dependency ( implementation ‘com.hbb20:ccp:2.5.1’ ) in the App label in buid.gradle file like below this

3. After or implementing this dependency clock on Sync Now you can see it in the above image.

4. In the .xml file

<com.hbb20.CountryCodePicker
            android:id="@+id/countyCodePicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

OR in Full design code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:text="Welcome to CCP"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="70dp">

        <com.hbb20.CountryCodePicker
            android:id="@+id/countyCodePicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Phone"
            android:inputType="phone" />

    </LinearLayout>

    <ImageView
        android:id="@+id/flag_imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="50dp"
        android:layout_gravity="center"/>
</LinearLayout>

5. Now if you want to use country code then set click event in your Activity/ Fragment or in any kt file in which you are using your XML

package com.famous.coader.countrycodepicker

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.Toast
import com.hbb20.CountryCodePicker

class MainActivity : AppCompatActivity() {
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        //finding elements using findViewById
        val countryCodePicker = findViewById<CountryCodePicker>(R.id.countyCodePicker)
        val countryFlag = findViewById<ImageView>(R.id.flag_imageView)
        
        // set click event using setOnCountryChangeListener for countryName, countryCode, countryCodeName, countryFlagImage and more
        countryCodePicker.setOnCountryChangeListener {
            
            val countryName = countryCodePicker.selectedCountryName
            val countryCode = countryCodePicker.selectedCountryCode
            val countryCodeName = countryCodePicker.selectedCountryNameCode
            val countryCodeWithPlus = countryCodePicker.selectedCountryCodeWithPlus
            val countryFlagImage = countryCodePicker.selectedCountryFlagResourceId
            
            // set selected flag in image view
            countryFlag.setImageResource(countryFlagImage)
            
            Toast.makeText(this, "$countryName, $countryCode, $countryCodeName, $countryCodeWithPlus", Toast.LENGTH_SHORT).show()

        }
    }
}

Thank you very much friends for reading or following this article.

You can get source code on my GitLab account

sudish kumar / Country Code Picker Kotlin · GitLab

Hope it gets helpful so kindly Follow and subscribe for new articles

👌👌✔👍