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?

Answer 1

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();
            }
        });
    }

Answer 2

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));

Answer 3

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.