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


Archive