Xamarin.Forms Country Picker with Rg.Plugins.Popup

Beautiful Country Picker for any Xamarin.Forms application with Rg.Plugins.Popup NuGet and online SVG Flags

Hi Folks 😛. Today I would like to share with you a beautiful country picker implementation that you can integrate into any Xamarin.Forms application. All you need is to copy a couple of folders from the GitHub repo and just enjoy or customize according to your project requirements.

bbenetskyy/XamarinCountryPicker

From time to time we need to provide users with the possibility to select a Country, not so often we also need to specify the country code. So, why don’t have a beautiful popup in that case which brings us the possibility to search a country and immediately see a country code?

Popup Requirements

• Popup should be exactly the same in both platforms — Android & iOS.
• Popup should have open and close animation.
• Popup should contain as much countries as can without any hardcoding.
• Popup should contains flags for each country without adding each flag as embedded resource.
• Popup should contains country code without any hardcoding key-value pairs.
• Popup should have possibility to search by Country Name.
• Popup should have possibility to cancel selection and get back with initial country.

I think that’s all I’d like to achieve, and it’s almost close to some real-world usage scenarios 🙃. Now let’s implement it 😎

NuGet Packages

Here is the minimum set of NuGet Packages used for that popup. I will provide short description for what each NuGet were used, maybe not all features you need in your application and than you can omit some packages:

• Rg.Plugins.Popup is used to display pop-ups
• Xamarin.Forms.PancakeView is used for round some corners
• libphonenumber-csharp is used to obtain the country code number
• Xamarin.FFImageLoading.Svg.Forms is used to display SVG images from the Internet

Project Sctructure

Example Application https://github.com/bbenetskyy/XamarinCountryPicker created on default Xamarin.Forms Shell template, so we will don’t stop on it and just take our attention into next folders:

All that folders & files is just need to be copied into your app, nothing needs to be changed except namespaces. Also, we have two Custom Renderers in Android and iOS project which need to be also copied:

Models

We have only one model CountryModel which implement INotifyPropertyChanged interface and have three fields:

• FlagUrl — complete URL to https://hatscripts.github.io/circle-flags site where circle svg flags for each country located.
• CountryName — English country name.
• CountryCode — country phone number.

Utils

We have one CountryUtils static class which will get for us list of RegionInfo according to ISO3166 and convert Engligh country name into CountryModel :

Here all is simple, one what may interest you is this PhoneNumberUtil — this is instance from libphonenumber-csharp NuGet which just getting CountryCode at line 41 by two letter ISO Region Name( US , PL , …)

Controls

Here I create only one control to display Flag along with Country Name and Code because final UI of complete control in your app can be anything, but like and example how it may be you can take a look at AboutPage.xaml

If you want something like that — create control with similar code and required Bindable Properties according to your needs.

Ok, now let’s take a look at CountryControl which is used inside ChooseCountryPopup to display Country Model :

And Code Behind with one Bindable Property — Country of type CountryModel :

Still all is quite simple 😋, let’s come to star of this blog — Choose Country Popup.

Popups

Let me show XAML code of Popup and then we stop on couple important points:

As you may remember one of requirement were open and close animations. It’s pretty simple to achieve thanks to built-in into Rg.Plugin.Popups PopupPage.Animation :

This will show from bottom and hide back with short duration. According to my own tests, the best is 400ms to in and 300ms to out, but take a moment and play with that values, maybe you will find better options for you 😉

Next important thing to discuss is ListView with collection of all Countries:

🛑 ⛔️ 📛 And if you select any other CachingStrategy than RetainElement on iOS Popup will not appear!!!! On Android all will be good, but at iOS you need to have RetainElement to see this popup!!! 🛑 ⛔️ 📛

Also, as I mentioned early — we have two custom renderers, they are used to set transparent or white background for SearchBar and for ViewCell inside ListView . Placing here code both of them will be just wasting your time to skipping all that code, so I will just left a links to GitHub if you really interested how they are done.

iOS Renderers:

• https://github.com/bbenetskyy/XamarinCountryPicker/blob/master/XamarinCountryPicker.iOS/Renderers/CustomSearchBarRenderer.cs
• https://github.com/bbenetskyy/XamarinCountryPicker/blob/master/XamarinCountryPicker.iOS/Renderers/CustomSearchBarRenderer.cs

Android Renderers:

• https://github.com/bbenetskyy/XamarinCountryPicker/blob/master/XamarinCountryPicker.Android/Renderers/CustomSearchBarRenderer.cs
• https://github.com/bbenetskyy/XamarinCountryPicker/blob/master/XamarinCountryPicker.Android/Renderers/CustomViewCellRenderer.cs

Ok, time comes for code behind of ChooseCountryPopup there is nothing special just some logic for loading complete list of countries and searching, so I just left it here without any additional description:

And I think this is all folks 🤪, now I just left a couple of links to my profile and a short video from Android with Country Popup 🙂

JavaScript is not available.

Bohdan Benetskyi is creating advanced CSS gradients for Xamarin, speak at conferences