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 33defaultConfig {
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 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:
