Country Code Picker (CCP) is an android library which provides an easy way to search and select country phone code for the telephone number.
CCP gives professional touch to your well designed form like login screen, sign up screen, edit profile screen. CCP removes confusion about how to add number and thus make view more understandable. Finally reduces mistakes in user input.
Above view can be transformed by using CCP
Tapping on CCP will open a dialog to search and select country
The most recommended usage for CCP is using the default setting so the library will auto check the all the value. To do that, you need to follow the following steps:
registerPhoneNumberTextView(editText)
we can also use TextView instead of editText.Here the more details steps:
Add CCP to layout using the following:
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Add EditText view to layout:
<EditText
android:id="@+id/phone_number_edt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="phone"
android:inputType="phone"/>
register the EditText with code:
CountryCodePicker ccp;
AppCompatEditText edtPhoneNumber;
...
ccp = (CountryCodePicker) findViewById(R.id.ccp);
edtPhoneNumber = findViewById(R.id.phone_number_edt);
...
ccp.registerPhoneNumberTextView(edtPhoneNumber);
Now look at the magic ;)
you can check validity of phone number using isValid() method.
Add jitpack.io to your root build.gradle file:
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
Add library to your app build.gradle file then sync
dependencies {
implementation 'com.github.joielechong:countrycodepicker:2.4.2'
}
Add ccp view to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Add ccp object in Activity / Fragment
CountryCodePicker ccp;
Bind ccp from layout
ccp = (CountryCodePicker) findViewById(R.id.ccp);
That's it. Run the project and see the results.
If your project is obfuscated with DexGuard you may need to add the following line to the DexGuard configuration:
-keepresourcefiles assets/io/michaelrocks/libphonenumber/android/**
This is because this library use libphonenumber-android
Here the attributes that can be used in CountryCodePicker layout:
Attribute | method | Description |
---|---|---|
ccp_defaultCode | setDefaultCountryUsingPhoneCodeAndApply(int defaultCode) | set selected Flag and phone in CCP by phone code. |
ccp_showFullName | showFullName(boolean show) | Show full name of country in CCP. Default is false |
ccp_hideNameCode | hideNameCode(boolean hide) | Hide the country name code. Default is false |
ccp_hidePhoneCode | hidePhoneCode(boolean hide) | Hide the phone code. Default is false |
TBD.
If you prefer experience along with only reads, an demo android app is available that demonstrates all the features of this library. Click below button to download from Playstore.
If you just want to read them, here you go:
The default country can be set through xml layout and programmatically as well.
Add app:ccp_defaultNameCode="US"
(replace "US" with your default country name code) to xml layout. Refer List of countries for name codes.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_defaultNameCode="US" />
app:ccp_defaultCode="81"
(replace 81 with your default country code) to xml layout.Refer List of countries for country codes.Setting default country using phone code is not recommended. There are few cases where more than one countries have same phone code. Say US and Canada have +1. Putting '1' will result in Canada even if you were intended for US. Use app:cpp_defaultNameCode
or app:cpp_countryPreference
to overcome issue.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_defaultCode="81" />
_app:ccp_defaultNameCode
has higher priority than app:ccp_defaultCode
._
Use setDefaultCountryUsingNameCode()
method.
To set default country programmatically, use setDefaultCountryUsingPhoneCode()
method.
setDefaultCountryUsingNameCode()
or setDefaultCountryUsingPhoneCode()
will not set default country as selected country in CCP view. To set default country as selected country in CCP view, call resetToDefaultCountry()
method.
resetToDefaultCountry()
will set default country as selected country in CCP, it can be used at the time of form reset.
If you do not specify default country from xml, ID +91 (Indonesia) will be the default country until you update default country programmatically.
Choosing and setting country will update selected country in CCP view.
Click on county from list to choose
Using country code name
Country in CCP can be using setCountryForNameCode()
method.
Using phone code
setCountryForCode()
method.How to listen change in selection?
To get call back when country is changed, you need to add OnCountryChangeListener
from code.
ccp.setOnCountryChangeListener(new CountryCodePicker.OnCountryChangeListener() {
@Override
public void onCountrySelected(Country selectedCountry) {
Toast.makeText(getContext(), "Updated " + selectedCountry.getName(), Toast.LENGTH_SHORT).show();
}
});
Add app:ccp_countryPreference="US,ID,NZ"
(replace "US,ID,NZ" with your preference) to xml layout. Refer List of countries for name codes.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_countryPreference="US,ID,NZ" />
Use setCountryPreference()
method.
Country's 3 properties (Country name, phone code and name code) can be read individually.
getSelectedCountryCode();
method. => “91”getSelectedCountryCodeWithPlus();
method. => “+91”getSelectedCountryCodeAsInt();
method. => 91To get selected country’s name, use getSelectedCountryName();
=> “Indonesia”
To get selected country’s name code, use getSelectedCountryNameCode();
=> “ID”
Full number is combination of country code and carrier number. for example, if country code is 91 and carrier number is 8866667722 then 918866667722 or +918866667722 is the full number.
CarrierNumberEditText
is the supplementary editText in which carrier number part of full number is entered.registerPhoneNumberTextView()
.setFullNumber()
method. In this method you need to pass the full number.getFullNumber();
for full number without “+” prefix.getFullNumberWithPlus();
for full number with “+” prefix.setFullNumber()
or getFullNumber()
.Color of CCP text can be changed according to different background.
Add app:ccp_textColor
property to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_textColor="@color/custom_color"/>
You can also change the dialog text color with ccp_dialogTextColor
attribute. It will be defaulting to your current theme text color.
To set color programmatically, use setTextColor()
method.
You can also change the dialog text color with setDialogTextColor()
method.
CCP background color can be set to any custom color. It will be defaulting to application theme if not set up.
Add app:ccp_backgroundColor
property to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_backgroundColor="@color/custom_color"/>
To set color programmatically, use setBackgroundColor()
method.
Add app:ccp_textSize property to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_textSize="26sp"/>
To set textSize
programmatically, use setTextSize()
method.
Size if Down arrow of CCP view can be modified in order to match rest of the view of form.
Add app:ccp_arrowSize
property to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_arrowSize="26sp"/>
To set arrow size programmatically, use setArrowSize()
method.
By default, text of CCP contains country's name code. i.e "(US) +1". Country name code can be removed if required.
Add app:ccp_hideCodeName
property to xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_hideNameCode="true"/>
To hide name code programmatically, use hideNameCode()
method.
setCountryForCodeName()
or setFullNumber()
will consider all the countries.Add app:ccp_customMasterCountries="US,ID,NZ,BD,PL,RO,ZW"
(replace "US,ID,NZ,BD,PL,RO,ZW" by your own country code names) to xml layout. Refer List of countries for name codes.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_customMasterCountries="US,IN,NZ,BD,PL,RO,ZW" />
setCustomMasterCountries()
method. setCustomMasterCountries(null)
will remove custom list and revert to library default list.FontFamily of CCP content can be changed in order to match rest of the view of form.
Do the following step first:
Typeface typeFace=Typeface.createFromAsset(getContext().getAssets(),"myfonts.ttf");
ccp.setTypeFace(typeFace);
OR ccp.setTypeFace(typeFace,customStyle);
Add app:ccp_textFont="myfonts.ttf"
to use the font
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_textFont="myfonts.ttf" />
Add app:ccp_showFlag="false"
to remove flag using xml layout
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_showFlag="false" />
Use showFlag(false)
method to hide the flag.
showFullName
will replace name code with full name.Add app:ccp_showFullName="true"
to show full nameinstead of name code
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_showFullName="true"/>
Use showFullName(true)
or showFullName(false)
method to show / hide the full name.
Developer can toggle click listener of CCP
Add app:ccp_clickable="true"
to enable click listener.
<com.rilixtech.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_clickable="false"/>
Use setClickable(true)
or setClickable(false)
method to enable / disable the click.
The phone code can be hide or show if you want. By default the phone code is shown. We don't need to add the attribute to show the phone code.
Add app:ccp_hidePhoneCode="true"
to hide the phone code.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_hidePhoneCode="true"/>
Use setHidePhoneCode(true)
or setHidePhoneCode(false)
method to hide / show the phone code.
You need to set an EditText for phone number with registerPhoneNumberTextView()
to make use of this.
Ignore this if you don't.
The auto formatter for EditText can be enable/disable by using enablePhoneAutoFormatter
attribute. By default, auto formatter is enabled.
Add app:ccp_enablePhoneAutoFormatter="false"
to disable.
<com.rilixtech.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_enablePhoneAutoFormatter="false"/>
Use enablePhoneAutoFormatter(true)
or enablePhoneAutoFormatter(false)
method to enable / disable auto formatter.
To check for it, use isPhoneAutoFormatterEnabled()
You need to set an EditText for phone number with registerPhoneNumberTextView()
to make use of this.
Ignore this if you don't.
By default, CCP will checking for country code from time zone if no default country code set and no country code is found from device network.
The default value is true.
Use ccp_setCountryByTimeZone
attribute to change.
This attribute is having the least order from defaultNameCode. Here the order CCP use:
ccp_defaultNameCode
ccp_setCountryByTimeZone
Add app:ccp_setCountryByTimeZone="false"
to disable.
<com.rilixtech.widget.countrycodepicker.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_setCountryByTimeZone="false"/>
Use enableSetCountryByTimeZone(true)
or enableSetCountryByTimeZone(false)
method to enable / disable time zone.
To check for it, use isPhoneAutoFormatterEnabled()
Tejas N A for the PR. [sadegh] (https://github.com/sadeghpro) for the PR.
Michael Rozumyanskiy for libphonenumber-android
Harsh Bhakta for the original project at CountryCodePickerProject
egek92 for Turkish translation.
Copyright (C) 2019 Joielechong
Copyright (C) 2016 Harsh Bhakta
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.