How to Implement Country Code Picker in Android?

Country Code Picker (CCP) is an android library that helps users to select country codes (country phone codes) for telephonic forms. CCP provided a UI component that helps the user to select country codes, country flags, and many more in an android spinner. It gives well-designed looks to forms on the login screen, sign-up screen, etc.  This lower the user’s mistake and provides a professional look to the application. A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Navigate to Gradle Scripts > settings.gradle(Project Setting) and the JitPack repository inside repositories in dependencyResolutionManagement {}.

allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}

Step 3: Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.  

implementation ‘com.hbb20:ccp:2.6.0’

Now update SDK Version and Sync the project by clicking on Sync Now option appearing in the top right corner.

android {
   compileSdk 33

   defaultConfig {
       applicationId “com.example.ccp”
       minSdk 21
       targetSdk 33
       versionCode 1
       versionName “1.0”

       testInstrumentationRunner “androidx.test.runner.AndroidJUnitRunner”
   }

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:paddingRight="30dp"
    android:paddingLeft="30dp"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <LinearLayout
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:orientation="vertical"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:text="Country Code Picker"
            android:gravity="center">
          </TextView>

        <com.hbb20.CountryCodePicker
            app:ccp_defaultNameCode="IND"
            android:id="@+id/country_code"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:ccp_autoDetectCountry="true"
            app:ccp_showFlag="true"
            app:ccp_showNameCode="true"
            app:ccp_showFullName="true">
          </com.hbb20.CountryCodePicker>

        <Button
            android:layout_width="150dp"
            android:layout_gravity="center"
            android:layout_height="40dp"
            android:layout_marginTop="20dp"
            android:text="ok"
            android:id="@+id/show_code">
          </Button>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.example.ccp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.hbb20.CountryCodePicker;

public class MainActivity extends AppCompatActivity {

    CountryCodePicker codePicker;
    Button show_code;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // hookers
        codePicker=findViewById(R.id.country_code);
        show_code=findViewById(R.id.show_code);

        // set OnClickListener to the button
        show_code.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // getting the country code
                String country_code=codePicker.getSelectedCountryCode();

                // getting the country name
                String country_name=codePicker.getSelectedCountryName();

                // getting the country name code
                String country_namecode=codePicker.getSelectedCountryNameCode();

                // Toast to show to information based on the selection
                Toast.makeText(MainActivity.this, "Country Name:-"+country_name+" Country Name Code:-"+country_namecode+" Country Code:-"+country_code, Toast.LENGTH_SHORT).show();

            }
        });
    }

}

Output: