Creating a spinner for choosing country code

Question

I want to create a spinner for selecting a country and getting its country code.

I already found this item list:

<string-array name="countryCodes">
    <item>93,AF</item>
    <item>355,AL</item>
    <item>213,DZ</item>
    <item>376,AD</item>
    <item>244,AO</item>
    <item>672,AQ</item>
    <item>54,AR</item>
    <item>374,AM</item>
    <item>297,AW</item>
    <item>61,AU</item>
    <item>43,AT</item>
    <item>994,AZ</item>
    <item>973,BH</item>
    <item>880,BD</item>
    <item>375,BY</item>
    <item>32,BE</item>
    <item>501,BZ</item>
    <item>229,BJ</item>
    <item>975,BT</item>
    <item>591,BO</item>
    <item>387,BA</item>
    <item>267,BW</item>
    <item>55,BR</item>
    <item>673,BN</item>
    <item>359,BG</item>
    <item>226,BF</item>
    <item>95,MM</item>
    <item>257,BI</item>
    <item>855,KH</item>
    <item>237,CM</item>
    <item>1,CA</item>
    <item>238,CV</item>
    <item>236,CF</item>
    <item>235,TD</item>
    <item>56,CL</item>
    <item>86,CN</item>
    <item>61,CX</item>
    <item>61,CC</item>
    <item>57,CO</item>
    <item>269,KM</item>
    <item>242,CG</item>
    <item>243,CD</item>
    <item>682,CK</item>
    <item>506,CR</item>
    <item>385,HR</item>
    <item>53,CU</item>
    <item>357,CY</item>
    <item>420,CZ</item>
    <item>45,DK</item>
    <item>253,DJ</item>
    <item>670,TL</item>
    <item>593,EC</item>
    <item>20,EG</item>
    <item>503,SV</item>
    <item>240,GQ</item>
    <item>291,ER</item>
    <item>372,EE</item>
    <item>251,ET</item>
    <item>500,FK</item>
    <item>298,FO</item>
    <item>679,FJ</item>
    <item>358,FI</item>
    <item>33,FR</item>
    <item>689,PF</item>
    <item>241,GA</item>
    <item>220,GM</item>
    <item>995,GE</item>
    <item>49,DE</item>
    <item>233,GH</item>
    <item>350,GI</item>
    <item>30,GR</item>
    <item>299,GL</item>
    <item>502,GT</item>
    <item>224,GN</item>
    <item>245,GW</item>
    <item>592,GY</item>
    <item>509,HT</item>
    <item>504,HN</item>
    <item>852,HK</item>
    <item>36,HU</item>
    <item>91,IN</item>
    <item>62,ID</item>
    <item>98,IR</item>
    <item>964,IQ</item>
    <item>353,IE</item>
    <item>44,IM</item>
    <item>972,IL</item>
    <item>39,IT</item>
    <item>225,CI</item>
    <item>81,JP</item>
    <item>962,JO</item>
    <item>7,KZ</item>
    <item>254,KE</item>
    <item>686,KI</item>
    <item>965,KW</item>
    <item>996,KG</item>
    <item>856,LA</item>
    <item>371,LV</item>
    <item>961,LB</item>
    <item>266,LS</item>
    <item>231,LR</item>
    <item>218,LY</item>
    <item>423,LI</item>
    <item>370,LT</item>
    <item>352,LU</item>
    <item>853,MO</item>
    <item>389,MK</item>
    <item>261,MG</item>
    <item>265,MW</item>
    <item>60,MY</item>
    <item>960,MV</item>
    <item>223,ML</item>
    <item>356,MT</item>
    <item>692,MH</item>
    <item>222,MR</item>
    <item>230,MU</item>
    <item>262,YT</item>
    <item>52,MX</item>
    <item>691,FM</item>
    <item>373,MD</item>
    <item>377,MC</item>
    <item>976,MN</item>
    <item>382,ME</item>
    <item>212,MA</item>
    <item>258,MZ</item>
    <item>264,NA</item>
    <item>674,NR</item>
    <item>977,NP</item>
    <item>31,NL</item>
    <item>599,AN</item>
    <item>687,NC</item>
    <item>64,NZ</item>
    <item>505,NI</item>
    <item>227,NE</item>
    <item>234,NG</item>
    <item>683,NU</item>
    <item>850,KP</item>
    <item>47,NO</item>
    <item>968,OM</item>
    <item>92,PK</item>
    <item>680,PW</item>
    <item>507,PA</item>
    <item>675,PG</item>
    <item>595,PY</item>
    <item>51,PE</item>
    <item>63,PH</item>
    <item>870,PN</item>
    <item>48,PL</item>
    <item>351,PT</item>
    <item>1,PR</item>
    <item>974,QA</item>
    <item>40,RO</item>
    <item>7,RU</item>
    <item>250,RW</item>
    <item>590,BL</item>
    <item>685,WS</item>
    <item>378,SM</item>
    <item>239,ST</item>
    <item>966,SA</item>
    <item>221,SN</item>
    <item>381,RS</item>
    <item>248,SC</item>
    <item>232,SL</item>
    <item>65,SG</item>
    <item>421,SK</item>
    <item>386,SI</item>
    <item>677,SB</item>
    <item>252,SO</item>
    <item>27,ZA</item>
    <item>82,KR</item>
    <item>34,ES</item>
    <item>94,LK</item>
    <item>290,SH</item>
    <item>508,PM</item>
    <item>249,SD</item>
    <item>597,SR</item>
    <item>268,SZ</item>
    <item>46,SE</item>
    <item>41,CH</item>
    <item>963,SY</item>
    <item>886,TW</item>
    <item>992,TJ</item>
    <item>255,TZ</item>
    <item>66,TH</item>
    <item>228,TG</item>
    <item>690,TK</item>
    <item>676,TO</item>
    <item>216,TN</item>
    <item>90,TR</item>
    <item>993,TM</item>
    <item>688,TV</item>
    <item>971,AE</item>
    <item>256,UG</item>
    <item>44,GB</item>
    <item>380,UA</item>
    <item>598,UY</item>
    <item>1,US</item>
    <item>998,UZ</item>
    <item>678,VU</item>
    <item>39,VA</item>
    <item>58,VE</item>
    <item>84,VN</item>
    <item>681,WF</item>
    <item>967,YE</item>
    <item>260,ZM</item>
    <item>263,ZW</item>
</string-array>

But it doesn't contain the whole names, only the short forms. It would be great if there would be a list with the whole names in English.

Additionally I want to give the list another format for displaying, but how do I do that? I use this method from the android doc atm:

    Spinner spinner = (Spinner) findViewById(R.id.spinner);
    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,R.array.planets_array, android.R.layout.simple_spinner_item);
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spinner.setAdapter(adapter);

But I don't see how I could edit the item list's content there.

Could you help me?

Tantalous

WHat do you mean by I want to give the list another format for displaying ? what other format you want? – Slay

The way I do it now, my spinner displays the data just like it is written in the item, so '49,DE' for example. But I want to make it like 'Germany (+49)' or something like this – Tantalous

mapsofworld.com/world-maps/country-dialing-code.html has a list of country with codes. Take data from there and insert it in your String array. – Slay

Answer 1

I have a cleaner solution for you. You can use Country Code Picker (CCP) library directly.It will save you from boilerplate code. You just need to place the CountryCodePicker view in your layout XML. This is CCP view .

Your view will look like with your phone editText.

Download Sample application from PlayStore.

Clicking on CCP will open a dialog with a list of country to select from. Here you can search country with country name, code name, phone code. It also gives an option to autoformat phone number.

Selected country details can be read easily. For more details go to Library's Github page.

Porfirioporgy

How to make Spinner underlined as EditText and both are same level, considering EditText inside a TextInputLayout ? – Cobwebby

@blueware, can you please elaborate the question? – Porfirioporgy

@HBB20, check my question here please: TextInputLayout Alighment Issue with Spinner – Cobwebby

@blueware, I posted answer there. Let me know if it worked for you. (On that thread only) – Porfirioporgy

Oh.. what dependencies? If you can create a GitHub issue with details then it will be very helpful. Here is the GitHub repo. – Porfirioporgy

@Porfirioporgy is there anyway I can limit the countries in the list? – Udale

@FatimaHaidar, yes. There are two ways to do it. 1. Add selected countries (github.com/hbb20/CountryCodePickerProject/wiki/…) 2. Exclude unwanted countries (github.com/hbb20/CountryCodePickerProject/wiki/…) – Porfirioporgy

Answer 2

in gradle :

    // country picker
    implementation 'com.hbb20:ccp:1.7.1'

in XML

<com.hbb20.CountryCodePicker
                        android:id="@+id/ccp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="@color/colorGreyF5"
                        android:onClick="onCountryPickerClick"
                        android:paddingStart="@dimen/margin_10" />

in Activity :

CountryCodePicker ccp;
ccp = findViewById(R.id.ccp);
    public void onCountryPickerClick(View view) {
        ccp.setOnCountryChangeListener(new CountryCodePicker.OnCountryChangeListener() {
            @Override
            public void onCountrySelected() {
                //Alert.showMessage(RegistrationActivity.this, ccp.getSelectedCountryCodeWithPlus());
                selected_country_code = ccp.getSelectedCountryCodeWithPlus();
            }
        });
    }

Labelle

I am not getting default selected country code when activity created , only get when i click on the country select spinner even the deafult country is already selected . Any Solution . – Taal

@Taal you should add this attribute app:ccp_autoDetectCountry="true" – Geriatrics

@SaraTalaat Thanks for your comment. BTW, I already did it :) For more info try this : github.com/hbb20/CountryCodePickerProject – Taal

Answer 3

These are ISO 3166-1 alpha-2 codes. You can find a complete list on the ISO's website.

Running the following code in the JavaScript console (tested using Chrome) gives you a map from codes to countries in JSON format:

var result = {}
var rows = document.getElementsByTagName('tr');
for (var i=1; i<rows.length; i++) {
  var code = rows[i].cells[0].textContent;
  var country = rows[i].cells[1].textContent;
  result[code] = country;
}
console.log(JSON.stringify(result));

Dicast

I know these codes, but I actually don't want to write a translator manually for about 200 countries. Do you know a way I can pull out the data from there? – Tantalous

you can get these Codes in CSV File and read it from CSV file – Krusche

Ok, I was able to create a string-array as i wanted it in my string.xml - Thanks. But there is still the second issue: How can I change the display format? I already made the array adapter getting his data from a string array from my class instead of the one from the xml file, but how can i import the data to it? – Tantalous

Alright, I got it by myself after a while. String[] array = getResources().getStringArray(R.array.countryCodes); made it. Now I have an array in my class I can edit. – Tantalous

Plus one for this answer. Being a programmer contains something else than only using everything ready. It's easy enough for Android dev to run the script. Thanks. – Echikson