How to Implement Country Code Picker in Android?

An Android library called Country Code Picker  assists users in choosing country codes  for phone forms. In an Android spinner, CCP offered a user interface component that facilitates the user's selection of country codes, flags, and numerous other options. It offers forms on the sign-up, login, and other screens a well-designed appearance.


In this article, you will learn how to create your Country Code Picker Example of Flashlight in Android. So let’s take example of Country Code Picker activity codes  in Android of Mobile application. 

Example of Country code view

                                            

Dependency of  country code

implementation(group = "com.hbb20", name = "ccp", version = "2.7.3")

 Properties of country code 

  • ccp_showflag : This properties returns of boolean true and false . when flag image hide then pass false in xml layout.
  •  ccp_showNumbercode : This properties returns of boolean true and false . when numbercode hide then pass false in xml layout.
  • ccp_defaultNamecode: This properties pass country code like US,IN ,etc . it's country code is default while run the application.
  •  ccp_countryPreference : This properties set preference of country picker like US,IN.
Step-by-Step Im​plementation
​ Step 1: Create a New Project in Android ​studio (File >new  project). 


Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside activity_main.xml file.

 <?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:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <com.hbb20.CountryCodePicker
        android:id="@+id/countryCodePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:ccp_countryPreference="US,IN,NZ"
        app:ccp_defaultNameCode="AE"
        android:layout_marginTop="50dp"
        android:layout_marginStart="10dp"
        app:ccp_showFlag="false"
        app:ccp_showNameCode="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageViewlinetwo"
        android:layout_width="2dp"
        android:layout_height="25dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/linetwo"
        app:layout_constraintBottom_toBottomOf="@+id/countryCodePicker"
        app:layout_constraintStart_toEndOf="@+id/countryCodePicker"
        app:layout_constraintTop_toTopOf="@+id/countryCodePicker" />
    <ImageView
        android:id="@+id/imageViewlinethree"
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/line"
        app:layout_constraintTop_toBottomOf="@+id/imageViewlinetwo"
        tools:layout_editor_absoluteX="20dp" />
    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:hint="@string/hintnumber"
        android:padding="5dp"
        android:background="@null"
        app:layout_constraintBottom_toBottomOf="@+id/countryCodePicker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageViewlinetwo"
        app:layout_constraintTop_toTopOf="@+id/countryCodePicker" />
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btncontinue"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/round_corner_border"
        android:text="@string/continue_"
        android:textAllCaps="false"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/countryCodePicker" />
 </androidx.constraintlayout.widget.ConstraintLayout>

 

 Step 3: Create an MainActivity.kt file in your package folder .

Implement the same invoke the fol​low​ing code inside MainActivity.kt file.

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

 class MainActivity : AppCompatActivity() {
    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val countrycodepicker = findViewById<View>(R.id.countryCodePicker) as CountryCodePicker
        countrycodepicker.setOnCountryChangeListener {
            Toast.makeText(
                this@MainActivity,
                countrycodepicker.selectedCountryName,
                Toast.LENGTH_SHORT
             ).show()
         }

     }
    
 }

Step 4 : Output of above example.

                                                   

Happy coding!

365Bloggy July 22, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1757
Zoom In and Out to TextView in Android
0 543
How to underline text in textview
0 440
Shine Effect in Android
0 411
How to Create Marquee Text in Android?
0 359
Our blogs
Archive