If you are looking for an android library for specifically Country/CountryCode/CountryPhone drop-down style picker, this is the best you can find at the moment.
Country Code Picker (CCP) or is an android library which provides an easy way to search and select country or country phone code for the telephone number.
-
Give a professional touch to your well designed form like login screen, sign up screen, edit profile screen with CCP. When used as phone code picker, it helps by removing confusion about how to add phone number and making view more understandable.
-
With CCP you can get following views easily without boilerplate code. (Left: Phone code selector. Right: Country Selector)
-
Tapping on CCP will open a dialog to search and select country (Left: Phone code selector. Right: Country Selector)
Add this to your gradle file and sync
dependencies {
implementation 'com.github.gbksoft:GBKCountryCodePicker:v1.0.0'
}
Also add compileOptions
block to use java version 1.8
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
Add CountryCodePicker view to XML layout
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/countryCodePickerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
Add CCP object in Activity / Fragment and bind it from layout
CountryCodePicker ccp = (CountryCodePicker) findViewById(R.id.countryCodePickerView);
That's it. Run the project and see the results
To blend CCP with your project's theme style, you can modify CCP Theme and CCP Dialog Theme
Along with country and phone code selection, CCP offers all features which are required to support full number.
- Setup
- Auto-Formatting
- Number Validation
- Number Validity Change Listener
- Load Full Number
- Read Full Number
Full Number is concatenation of country code and carrier number i.e. if the country code is +1 and carrier number is 469 663 1766 then the full number will be +14696631766 or 14696631766.
- Add CCP view and editText of carrier number to XML layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/editText_carrierNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="phone"
android:inputType="phone"
android:singleLine="true" />
</LinearLayout>
- Add CCP object in Activity / Fragment and Bind CCP and Carrier Number editText from layout
CountryCodePicker ccp = (CountryCodePicker) findViewById(R.id.ccp);
EditText editTextCarrierNumber = (EditText) findViewById(R.id.editText_carrierNumber);
- Attach CarrierNumber editText to CCP.
ccp.registerCarrierNumberEditText(editTextCarrierNumber);
Auto formatting will keep carrier number formatted for selected country standerd. When you select country US (+1) and type 4696641777 in Carrier Edit Text, it will be formatted for US number format (469) 664-1777 as you type in.
By default, auto formatting is enabled for registered carrier number editText. So after successful setup , number in editTextCarrierNumber will be auto formatted as you type or load fullNumber in CCP.
To disable auto-formatting, add app:ccp_autoFormatNumber="false"
property to CCP XML entry or call ccp.setNumberAutoFormattingEnabled(false);
.
Once the setup is completed, you can validate entered full-number using ccp.isValidFullNumber();
. Using this, a developer can keep end user from submitting wrong phone or invalid phone number. This function will return the validation status at the time of calling it. So this can be used when you want to check if valid phone number is entered before submitting the form.
Validity Change Listener will get callBack every time validity of entered number changes.
ccp.setPhoneNumberValidityChangeListener(new CountryCodePicker.PhoneNumberValidityChangeListener() {
@Override
public void onValidityChanged(boolean isValidNumber) {
// your code
}
});
After setup, if you need to load existing full number, i.e. Edit Profile screen where you already have user's full phone number, then ccp.setFullNumber(existingFullNumber);
should be used. This will auto-detect country & carrier number from full number and load in CCP & carrier number editText.
"+" in beginning of existingFullNumber is optional. "14696641766" or "+14696641766", both will set US +1 in CCP and 469-664-1766 in carrier number edittext.
After successful setup when the user has entered a number, you can read that full number in 3 different versions.
//get formatted number i.e "+1 469-664-1766"
ccp.getFormattedFullNumber();
//get unformatted number i.e. "14696641766"
ccp,.getFullNumber();
//get unformatted number with prefix "+" i.e "+14696641766"
ccp.getFullNumberWithPlus();
You might need a country selector instead of country phone code selector. You can do it easily using CCP.
All you will need to do is:
Use full-width layout using android:layout_width="match_parent"
.
Show full name using app:ccp_showFullName="true"
.
Remove phone code using app:ccp_showPhoneCode="false"
.
Remove name code using app:ccp_showNameCode="false"
. (Optional)
Done! Your country selector / country spinner is ready.
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/countryCodePickerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_showFullName="true"
app:ccp_showPhoneCode="false"
app:ccp_showNameCode="false"
/>
this will turn your phone selector into country selector.
By default, the text gravity of the name will be "CENTER". You can change it using app:ccp_textGravity="LEFT"
or app:ccp_textGravity="RIGHT"
.
To customize dialog use this properties %ccpDropDown_
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/countryCodePickerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccpDropDown_showFullCountryName="true"
app:ccpDropDown_showPhoneCode="false"
app:ccpDropDown_showNameCode="false"
/>
The color of CCP content can be changed according to the different UI colors.
- Add
app:ccp_contentColor
property to xml layout
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/countryCodePickerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_contentColor="@color/custom_color"
/>
- Text size of CCP content can be changed in order to match rest of the view of form
- Everytime when textSize is updated, arrowsize will be updated itself.
Add app:ccp_textSize="24sp"
property to xml layout
To set color programmatically, use setTextSize(40)
method.
- For some UI designs, more clear visibility of flags can be achieved by adding border color. This is helpful for flags which has background matching color.
Add app:ccp_flagBorderColor="@color/colorAccent"
property to xml layout
To set it programmatically, use setFlagBorderColor(Color.RED)
method //should be @ColorInt
- Size if Down arrow of CCP view can be modified in order to match rest of the view of form.
Add app:ccp_arrowSize="20dp"
property to xml layout
To set textSize programmatically, use setArrowSize(100)
method.
- If you want to set arrow color other than content color, set specific arrow color using this property.
Add app:ccp_arrowColor="@color/custom_arrow_color"
property to xml layout
To set arrowColor programmatically, use setArrowColor(Color.RED)
method //should be @ColorInt
You can customize selection dialog's theme so that it gives native view feeling.
By using following properties, you can customize the look of country selection dialog
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/countryCodePickerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccpDialog_searchEditTextTint="@color/custom_editText_tint"
app:ccpDialog_backgroundColor="@color/custom_dialog_backgroud_color"
app:ccpDialog_textColor="@color/custom_dialog_text"
app:ccpDialog_fastScroller_bubbleColor="@color/custom_fastScroller_bubble"
app:ccpDialog_fastScroller_bubbleTextAppearance="@style/custom_text_appearance"
app:ccpDialog_fastScroller_handleColor="@color/custom_fastScroller_handle_color"
app:ccpDialog_showTitle = "false"
/>
- It can be enabled by adding XML property
app:ccp_autoDetectCountry="true"
in CCP view - Default value of app:ccp_autoDetectCountry is FALSE (Before 2.1.0, it was true which was confusing for many developers)
- app:ccp_rememeberLastSelection="true" can override auto detected country by last selected country
- The country is detected at the runtime, so it can not be shown in the Android Studio preview of the layout.
- SIM_NETWORK_LOCALE is the default preference order
Library uses 3 ways to detect user's location.
- Using SIM info
- This will detect country from an inserted sim.
- Devices without sim tray will not give expected result
- Read more on official site.
- Using Network info
- This will detect country from connected network's information
- Read more in official site.
- Using Locale
- Detect country from device's locale info.
- Library provides flexibility when it comes to order of execution of these options.
- Order can be specified with
app:ccp_countryAutoDetectionPref="LOCALE_SIM"
- e.g. "SIM_ONLY" will detect country from sim card. If it fails then ccp will reset to default country.
- e.g. "SIM_NETWORK" will try from SIM details, if it fails then will try to find from network info then will reset to default country
- e.g. "SIM_NETWORK_LOCALE" will follow SIM -> NETWORK -> LOCALE order.
- SIM_ONLY
- NETWORK_ONLY
- LOCALE_ONLY
- SIM_NETWORK
- NETWORK_SIM
- SIM_LOCALE
- LOCALE_SIM
- NETWORK_LOCALE
- LOCALE_NETWORK
- SIM_NETWORK_LOCALE
- SIM_LOCALE_NETWORK
- NETWORK_SIM_LOCALE
- NETWORK_LOCALE_SIM
- LOCALE_SIM_NETWORK
- LOCALE_NETWORK_SIM
ccp_autoDetectCountry must be enabled to detect country at the time of layout prepartion
- It can be enabled by adding XML property
app:ccp_autoDetectLanguage="true"
in CCP view - Default value of app:ccp_autoDetectLanguage is FALSE
- CCP supports set of languages. Check the latest list of supported languages at
attrs.xml
from ccp_defaultLanguage attribute. - When auto detect language is enabled, if device language is one of the CCP supported languages, then CCP and selection will be set to that language.
- The language is detected at the runtime, so it can not be shown in the Android Studio preview of the layout.
For some use-cases it is required that selection of country remains unchanged when app is restarted or activity is relaunched.
- To enable this, add
app:ccp_rememberLastSelection="true"
in XML of your CCP. - First time when there is no history of country selection, it will set default country or auto-detected country (if autoDetectCountry is enabled) in CCP.
- Now whenever user will select some country from a CCP dialog, that will be recorded on shared preferences.
- From next run, this will load last selected country and override default country or autodetected country.
- If you are working with multiple CCP views, you might want to save different selections for each.
- Simply by providing different memory tags, different selections will be maintained for each CCP.
- To specify tag, add
app:ccp_selectionMemoryTag="anyDifferentString"
to CCP along withapp:ccp_rememberLastSelection="true"
in XML of CCP.
-
Countries of preference will be listed at the top in selection dialog. It is helpful when the target audience is from a set of countries.
-
The library has a list of countries in alphabetical order. It searches for the country in same order. But preferred country/countries have higher priority than rest.
-
When more than one countries have the same code. For example, Canada, Puerto Rico and the US have +1.
-
If US is set in country preference, order for search will be (1)US-(2)Canada-(3)Puerto Rico, so it will pick the US for +1.
-
Any number of countries can be set in preference.
Add app:ccp_countryPreference="gb,us,ca,ch" (replace "gb,us,ca,ch" with your preference) to xml layout.
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_countryPreference="gb,us,ca,ch"
/>
Use setCountryPreference()
method.
This is how it will be shown in dialog.
-
If your app expects users from only few countries then you might wish to remove all other countries from selection list.
-
You can remove unnecessary countries by setting your custom master country list.
-
Also it will keep user from selecting irrelevant country.
-
Countries of preference will be listed at top in selection dialog. It is helpful when target audience is from a set of countries.
-
Custom master list will only limit the visibility of irrelevant countries from selection dialog. But all other functions like setCountryForCodeName() or setFullNumber() will consider all the countries.
-
Preferred country list will be a subset of custom master list. If some xyz country is not in custom master list, it won't be added to preferred country list.
-
- add app:ccp_customMasterCountries="US,IN,NZ,BD,PL,RO,ZW" (replace "US,IN,NZ,BD,PL,RO,ZW" by your own country code names) to xml layout.
<com.gbksoft.countrycodepickerlib.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" />
-
- Use
setCustomMasterCountries()
method. setCustomMasterCountries(null);
will remove custom list and revert to library default list.
- Use
-
Sometimes you want to remove some specific country from the list because of business requirement. With this feature, you can remove those specific countries from library's master list.
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_excludedCountries="in,us,pk" />
For example, the above code will exclude India (in), United States (us) and Pakistan (pk) from the library's master list. Programmatically it can be set using ccp.setExcludedCountries("in,us,pk")
.
Note: app:ccp_customMasterCountries
has higher priority than app:ccp_excludedCountries
so if your ccp uses custom master list of countries, then this will be ignored.
If you want the user to know expected number then you can enable this feature using app:ccp_hintExampleNumber="true"
. This will set example number as the hint (placeholder text) of registered carrier number edittext.
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_hintExampleNumber="true" />
Once you enable hint feature, by default, hints will be of MOBILE number type. You can change to FIXED_LINE or other using app:ccp_hintExampleNumberType="FIXED_LINE"
.
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccp_hintExampleNumberType="FIXED_LINE" />
To get a call back when the selected country is changed, you need to add OnCountryChangeListener from java file.
countryCodePicker.setOnCountryChangeListener(new CountryCodePicker.OnCountryChangeListener() {
@Override
public void onCountrySelected() {
Toast.makeText(getContext(), "Updated " + ccp.getSelectedCountryName(), Toast.LENGTH_SHORT).show();
}
});
You might want to do something specific when the CCP dialog is launched, dismissed or canceled. Once the integration is completed, you can add a listener.
countryCodePicker.setDialogEventsListener(new CountryCodePicker.DialogEventsListener() {
@Override
public void onCcpDialogOpen(Dialog dialog) {
//your code
}
@Override
public void onCcpDialogDismiss(DialogInterface dialogInterface) {
//your code
}
@Override
public void onCcpDialogCancel(DialogInterface dialogInterface) {
//your code
}
});
FontFamily or TypeFace of CCP view and dialog can be changed in order to match rest of the view of your screen.
-
Font can be set only programmatically.
-
- Step 1: create a folder named 'assets' under 'app/src/main/' folder. If you already have 'app/src/main/assets' then jump to next step.
- Step 2: put your font's .ttf file in assets folder. For example if file name is 'myfonts.ttf', it should be 'app/src/main/assets/myfonts.ttf'. Make sure that the extension '.ttf' have contain small letters only. '.TTF' might not work.
- Step 3: Prepare typeFace using
Typeface typeFace=Typeface.createFromAsset(getContext().getAssets(),"myfonts.ttf");
- Step 4: finally apply the type face on ccp
ccp.setTypeFace(typeFace);
ORccp.setTypeFace(typeFace,customStyle);
Following above steps with apply "myfonts" to CCP view's text and dialog as well.
For flexibility, CCP maintains two typefaces. One for CCP view and one for dialog. For ease, it updates both when ccp.setTypeFace();
is called.
- If you want to use typeface only for dialog's text, use
ccp.setDialogTypeFace()
. - If want to use typeface for CCP view but want to keep dialog's typeface as default. SO should call
ccp.setTypeFace(typeFace,customStyle);
and thenccp.setDialogTypeFace(null);
- To get selected country code as String type and without prefix “+”, use
getSelectedCountryCode();
method. => “91” - To get selected country code as String type and with prefix “+”, use
getSelectedCountryCodeWithPlus();
method. => “+91” - To get selected country code as int (Integer) type, use
getSelectedCountryCodeAsInt();
method. => 91
- To get selected country’s name in selected language, use
getSelectedCountryName();
=> “India” (for english), "भारत" (for hindi)...... - To get selected country's English name, use
getSelectedCountryEnglishName();
=> "India" (English name, irrespective of selected language)
- To get selected country’s name code, use
getSelectedCountryNameCode();
=> “IN”
If u want to change default flag images to your own implementation you can override it in this way.
Just create your own map with country as key
and drawable resource as value
:
countryCodePicker = (CountryCodePicker) findViewById(R.id.countryCodePickerView);
Map<String, Integer> customFlagsMap = new HashMap<>();
customFlagsMap.put("US", R.drawable.ic_public_black_24dp);
customFlagsMap.put("ca", R.drawable.ic_spa_black_24dp);
countryCodePicker.setCustomFlagsForCountries(customFlagsMap);
Result:
Here are all the XML properties available for CCP. Scroll down for detailed explanation of each...
<com.gbksoft.countrycodepickerlib.CountryCodePicker
android:id="@+id/ccp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:ccpDropDown_allowSearch="false"
app:ccpDropDown_backgroundColor="@color/custom_color"
app:ccpDropDown_initialScrollToSelection="true"
app:ccpDropDown_keyboardAutoPopup="false"
app:ccpDropDown_searchEditTextTint="@color/custom_color"
app:ccpDropDown_showFlag="false"
app:ccpDropDown_showPhoneCode="false"
app:ccpDropDown_textColor="@color/custom_color"
app:ccpDropDown_showFullCountryName="false"
app:ccpDropDown_viewSortDefaultColor="@color/colorDefault"
app:ccpDropDown_viewSortSelectedColor="@color/colorSelected"
app:ccpDropDown_showNameCode="false"
app:ccp_arrowColor="@color/custom_arrow_color"
app:ccp_arrowSize="20dp"
app:ccp_autoDetectCountry="true"
app:ccp_autoDetectLanguage="true"
app:ccp_autoFormatNumber="false"
app:ccp_clickable="true"
app:ccp_contentColor="@color/custom_color"
app:ccp_countryAutoDetectionPref="SIM_ONLY"
app:ccp_countryPreference="US,NZ"
app:ccp_customMasterCountries="AD,BT,CL,HT,US,GB,OM,NZ"
app:ccp_defaultNameCode="US"
app:ccp_excludedCountries="in,us,pk"
app:ccp_flagBorderColor="@color/custom_color"
app:ccp_hintExampleNumber="true"
app:ccp_hintExampleNumberType="FIXED_LINE"
app:ccp_rememberLastSelection="true"
app:ccp_selectionMemoryTag="signupCCP"
app:ccp_showArrow="false"
app:ccp_showFlag="false"
app:ccp_showFullName="true"
app:ccp_showNameCode="false"
app:ccp_showPhoneCode="false"
app:ccp_textGravity="RIGHT"
app:ccp_textSize="20sp"
app:ccp_areaCodeDetectedCountry="false"
app:ccp_defaultPhoneCode="33"
app:ccp_internationalFormattingOnly="false"
app:ccp_useDummyEmojiForPreview="false"
app:ccp_useFlagEmoji="false"
/>
-- This is the country which will be set automatically when layout prepared. If auto_detect_country
is enabled, this country will be set in CCP fails to detect country or something goes wrong.
This will change the color of text and down arrow of CCP view.
If you want to set arrow color other than content color, set specific arrow color using this property.
Changes the size of CCP text. It also changes arrowSize accordingly unless explicitly stated using app:ccp_arrowSize.
Specifies the size of downward arrow.
Sets specified countries as master countries and will list only those countries to select from. If not specified, all the countries from library will be listed. Read more
Specified countries will be set as preferred countries and will be listed at the top of countries list. Read more
If you feel like flags are not properly visible because of matching background color, you can give border color to the flag for better appearance.
When width is “match_parent”, this will decide the gravity of text in CCP view.
Decide whether to show name code on CCP. Default : TRUE
Toggles visibility of flag on CCP.
To show or hide full name of country on CCP. Default : FALSE
Enable / disable click of ccp.
To show or hide phoneCode from CCP. While using CCP as Country selector rather than Phone Code Picker, you want to remove phone code from CCP view. This will affect phone code of CCP_DIALOG unless specified using app:ccpDropDown_showPhoneCode.
If enabled, it will detect country from device and set in CCP as soon as view is rendered. When CCP fails to detect country from device or something goes wrong, it will set your default country (or India, if not specified) as selected country. Read more
If disabled, it will load your specified default country (or India, if not specified) in the CCP when view is prepared.
Before library version 2.1.0, default value was TRUE. That was confusing for many developers
If ccp_rememberLastSelection is enabled, then it might override auto detected country.
This decides how to detect country. Read more
If enabled, it will detect device language and load CCP for that language. If CCP fails to detect the language or language is not yet supported, it will switch back to the app:ccp_defaultLanguage.
Auto formatter will format the number as user types number in registered editText.
Remebers last selection when app is restarted. Read more
Tag name to store selection value in shared pref. Read more
Set visibility of down arrow on CCP view using app:ccp_showArrow.
When enabled, it will set selected country's example number as the hint of registered carrier number edit text.
This will define type of phone to use as example number.
Using this, developer can exclude specific countries from the selection list. If you have specified your own custom master list using app:ccp_customMasterCountries
, then app:ccp_excludedCountries
will be ignored.
Whether to show keyboard for search as soon as dialog for country selection is launched, is decided by this.
This will decide whether to allow search from the list of countries. When your custom master list is really short, you might want to remove search option from CCP dialog.
app:ccpDropDown_showPhoneCode=“false"
(Default : TRUE or follows app:ccp_showPhoneCode when specified)
While using library as Country Selector, you don’t want to show phone code of countries in list. Normally, setting app:ccp_showPhoneCode as false is sufficient to hide phone code from both, CCP and CCP DIALOG as app:ccpDropDown_showPhoneCode follows app:ccp_showPhoneCode by default.
This### helps you modify theme of the dialog. This will be the background color for the CCP Dialog.
If set false, it will remove flag from CCP selection dialog.
Added in version 2.2.3
When set true, ccpDialog will auto scroll to selected country. Note: If selected country is one of the preferred countries then it will not scroll and will show preferred countries from top to avoid user confusion.
Customize sort controls. Color of not selected sort button
Customize sort controls. Color selected sort button
There are some scenarios where developers wants to handle ccp click manually. Option to override clickListener was introduced in v2.2.3.
ccp.overrideClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//your code here.....
//using following code you can launch
//ccp country selection dialog manually (if required)
// ccp.launchCountrySelectionDialog();
}
});
ccp.overrideClickListener(null);