DEV Community

Cover image for Simple Country Code Picker For Android In Kotlin
Siddharth Singh Baghel
Siddharth Singh Baghel

Posted on • Updated on

Simple Country Code Picker For Android In Kotlin

#kotlin #android #tutorial #devjournal

App's Overview

  • In this article, I am going to demonstrate how to create a simple country code picker in an android application through Kotlin.

CCP Demo

Table Of Content

Project Setup

  • Add the below line of code in build.gradle (project) under allprojects. ```

maven { url "https://jitpack.io" }

The code snippet will look like the one below :
Enter fullscreen mode Exit fullscreen mode

allprojects {
repositories {
google()
jcenter()
maven { url "https://jitpack.io" } /* changed file */
}
}

* Dependency to be added : Add the dependency below in `build.gradle (Module)`
Enter fullscreen mode Exit fullscreen mode

implementation 'com.github.joielechong:countrycodepicker:2.4.2'


The code snippet will look like the one below :
Enter fullscreen mode Exit fullscreen mode

dependencies {

...
other dependencies

...

/* Country Code Picker Dependency*/
implementation 'com.github.joielechong:countrycodepicker:2.4.2'
Enter fullscreen mode Exit fullscreen mode

}


---

<a name="UI"></a>
##App's UI

The app's UI is broken into two parts :

1. [Explanation of Country Code Picker (ccp)](#expCCP)
2. [Complete `.xml` code file (activity_main.xml)](#xml)

<a name="expCCP"></a>
> Explanation of ccp :

* The below code snippet shows the implementation of the country code picker through the `.xml` file. The below code snippet is not customized, it is the naive form of ccp but it will work completely fine in the android application. We shall see the customization in the next section of the blog.
Enter fullscreen mode Exit fullscreen mode

android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
/>


* Customization of ccp in .xml file

   1. **`app:ccp_defaultNameCode="IN"`** - `ccp_defaultNameCode` attribute will set the the default country of the ccp spinner.

   2. **`app:ccp_defaultCode="91"`** - `ccp_defaultCode` will similarly set the default country code in the spinner.

   3. **`app:ccp_textColor="#1C2020"`** - change the color of ccp according to app's theme with `ccp_textColor` attritubute.

   4. **`app:ccp_countryPreference="IN,US,NZ"`** - `ccp_countryPreference` will set some of the preferred countries on the top, so that they will be easily accessed. See the example image below :

![Preference Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8ol5ocnb1kcwky8tqtx.png)

The customized code snippet :
Enter fullscreen mode Exit fullscreen mode

android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_defaultNameCode="IN"
app:ccp_defaultCode="91"
app:ccp_textColor="#1C2020"
android:padding="16dp"
app:ccp_countryPreference="IN,US,NZ"/>

There are many attributes present in order to customize the ccp, you can get to know about them all in it's documentation [here](https://github.com/joielechong/CountryCodePicker).

<a name="xml"></a>
> Complete .xml file (activity_main.xml) :
Enter fullscreen mode Exit fullscreen mode

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"

tools:context=".MainActivity"
>

<LinearLayout
    android:id="@+id/llPhone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_centerInParent="true"

    >

    <com.rilixtech.widget.countrycodepicker.CountryCodePicker
        android:id="@+id/ccp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:ccp_defaultNameCode="IN"
        app:ccp_defaultCode="91"
        app:ccp_textColor="#1C2020"
        android:padding="16dp"
        app:ccp_countryPreference="IN,US,NZ"/>

    <EditText
        android:id="@+id/edtPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:padding="15dp"
        android:hint="@string/enter_phone_number"
        android:importantForAutofill="no"
        android:inputType="number" />

</LinearLayout>
<Button
    android:id="@+id/btnSendOTP"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/llPhone"
    android:padding="15dp"
    android:layout_margin="16dp"
    android:text="Send OTP"
    android:textStyle="bold"
    />
Enter fullscreen mode Exit fullscreen mode 

---

<a name="back"></a> 
##App's Backend

* Let's first link all the UI components with `MainActivity.kt`
Enter fullscreen mode Exit fullscreen mode

val ccp:CountryCodePicker = findViewById(R.id.ccp)
val edtPhoneNumber: EditText = findViewById(R.id.edtPhone)
val btnOTP: Button = findViewById(R.id.btnSendOTP)


* Tell ccp which edit text should be registered for phone numbers, use the below line of code
Enter fullscreen mode Exit fullscreen mode

ccp.registerPhoneNumberTextView(edtPhoneNumber)


* Now, let us create a function to check the validity of the phone number entered wrt the country code selected.

   **`ccp.isValid`** will check whether the phone number 
      is correct or not.

The function looks like :
Enter fullscreen mode Exit fullscreen mode

private fun checkValidity(ccp: CountryCodePicker): Boolean {

    return if(ccp.isValid) {
        Toast.makeText(this, "number " + ccp.fullNumber + " is valid.", Toast.LENGTH_SHORT).show()
        true
    } else {
        false
    }

}
Enter fullscreen mode Exit fullscreen mode 

The function returns `true` if phone number entered is correct otherwise it will return `false`.

* Finally, at last we will handle the button click and we are done to see the magic.
Enter fullscreen mode Exit fullscreen mode 
btnOTP.setOnClickListener{

        if(checkValidity(ccp))
        {
            //Change with your own functionality
            Toast.makeText(this, "OTP Sent", Toast.LENGTH_SHORT).show()

        }else{
            Toast.makeText(this, "Please enter a valid phone number", Toast.LENGTH_SHORT).show()
        }

    }
Enter fullscreen mode Exit fullscreen mode 
If the `checkValidity()` function returns true it will show a toast `OTP Sent`, you can change it with your function. 

If the phone number is wrong it will pitch an Incorrect Message toast.

---

<a name="GitHub"></a> 
##GitHub Repository
* Fork the repository for better and easy understanding and for quick learning.



  

    

      GitHub logo
      
        Siddharth-sing
       / 
        Country-Code-Picker
      
    

    

      An easy approach on how to create your country code picker for the edit text. 
    

  

  

    



Country-Code-Picker







Original Article on Dev.to Click below 👇







  

  





App's Overview







    

  • 

    In this article, I am going to demonstrate how to create a simple country code picker in an android application through Kotlin.
    

    • 

  • 

    Also, how to validate phone numbers for every country possible.
    

    • 




 







Table Of Content










Project Setup






    

  • Add the below line of code in build.gradle (project) under allprojects.
    • 




maven { url "https://jitpack.io" }



The code snippet will look like the one below :



allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}



    

  • Dependency to be added : Add the dependency below in build.gradle (Module)

    • 



implementation 'com.github.joielechong:countrycodepicker:2.4.2'



The code snippet will look like the one below :


dependencies {

   ...
    other dependencies   
   ...

    /* Country Code Picker Dependency*/
    implementation 'com.github.joielechong:countrycodepicker:2.4.2'
}








App's UI






The app's UI is broken into two parts…







  
View on GitHub







<a name="support"></a> 



  
  
  Writer's Support
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

olashina profile image

How to Deploy a NestJS Application to a VPS Server: A Complete Guide.

Olashina -

kiolk profile image

Day 44. Timestamp

Kiolk -

dee_codes profile image

Setting up Redis in a Next.js Application

Hadiza Mohammed -

thevediwho profile image

Swipe, Tap and Pinch Gestures in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi -