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.
All available countries. Not hardcoded - all get generic. SVG for each country from…
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 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 😎
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
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:
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.
We have one
class which will get for us list of
RegionInfo according to ISO3166 and convert Engligh country name into
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(
PL , …)
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
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
Still all is quite simple 😋, let’s come to star of this blog — Choose Country Popup.
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
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
RetainElementon iOS Popup will not appear!!!! On Android all will be good, but at iOS you need to have
RetainElementto see this popup!!! 🛑 ⛔️ 📛
Also, as I mentioned early — we have two custom renderers, they are used to set
white background for
SearchBar and for
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.
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 🙂