Xamarin Forms Month and Year Picker
How to create a native Month and Year Picker and use it from Xamarin Forms
Sometimes we want to select a Date with Month, Day and a Year and we can go with global custom picker on Xamarin.Forms or in an easy way create a Native picker to makes the app more predictable and harmonious for users. But what if we want to select only Month and a Year and still have only Native UI and Behavior? ā Here is where my blog starts making sense. In this article, I will provide you with a way to create your own custom control with native Month-Year Picker for Android and iOS and show how you can use it š
That repo has a huge piece of code with logic, you can go and investigate it on your own or just copy into your project and use it š¤© š„³. But in the blog post, I will focus only on parts that may be interesting for you.
Month Year Picker View Control
At Xamarin.Froms shared project we can use our Control in Xaml. For achieving that we should create a class
which will be inherited from View
. Next Step ā create a BindableProperty
for properties which we would like to customise our control. According to me, the next properties would be enough, but you may add or remove them according to your requirements.
And then you may use it in XAML:
Bindable Properties
As you can see our MonthYearPickerView use couple Bindable Properties
for making possible to has some binging available at XAML. All of them are simple, you just need a Property
and one Bindable Static Property
with defined: property name
, return type
, default value
, optionally you can also add default binding mode
and other.
TextColor
also define a default color to White
because mostly in my examples, I will use this color. So now I can not specify it in XAML till I want to change that.
Here we should pay additional attention to properties binding at Xamarin.Forms, because some of them may use TypeConverter
attributes, like FontSize
property:
You can learn more about them in official Microsoft Documentation page:
Android ā DialogFragment
Now letās start implementing native part of dialog for Android OS. Itās a huge class (~170 lines), so I just mention a couple of major points and all rest of them you should check by yourself.
- This Class should inherit
Android.Support.V4.App.DialogFragment
- Create Dialog from our
date_picker_dialog
layout - Initialize Year and Month Pickers
- Update Min/Max Values for Month During Scrolling
For what we need that update during Scrolling you may ask? ā Because our
Min
orMax
Dates may have some restriction in months.
For example, we want to allow a user to select a month and year between December 2019
and March 2022
. So 2020
and 2021
year will have all months available to select, 2019
will have only one and 2021
only three months.
Android ā Date Picker Dialog Layout
In the previous section, you saw that we should create dialog based on some layout file.
But is this file a predefined one at Xamarin.Android? ā No, we should create them, in native XML.
But donāt be afraid, it will be a really simple layout file š .
Yeah, as I told you. Just two NumberPicker
(s) centered with LinearLayout
at global LinearLayout
. And yes, it should be two of them if we want to center it correctly in Android. Donāt ask me why š¤.
Android ā Month Year Picker View Renderer
And the last thing in Android which should be done is Renderer
, Renderer for our MonthYearPickerView
control. This is not so huge class but has like ~120 lines of code, so again I just left a link to a whole class and focus at most interesting points.
Hope you also check out a link with examples of custom controls
and I donāt require to remind that we should export our renderer above the namespace
in our file:
The most interesting in this file is how we show the selected date
, update it after selection changed and show picker dialog:
- Override
OnElementChanged
method to set Native Control and subscribe to Entry Focused Event. - On Focus we create and show Picker Dialog and subscribe to
OnDateTimeChanged
andOnClosed
Letās take a look closer to setting Native Control at OnElementChanged
method, mean during element creating for the first time:
I was eject it to separate function named
CreateAndSetNativeControl
Updating Text
after selecting is quite similar:
iOS ā Picker Date Model
This file is quite similar to Android Picker Dialog
class and has ~180 lines of code, so yeah, again only link with homework for you to investigate it.
One what is good to mention that iOS does not change immediately selected values during the spin, we should wait while picker stop to select a new Date.
We should:
- Inherit from
UIPickerViewModel
- Override
GetTitle; GetComponentCount; GetRowsInComponent; and Selected
methods.
Hmm, there seems to be a lot of work to do š¤Ø. But itās not, all of them except Selected
are quite simple š.
iOS ā Month Year Picker Renderer
Same as for Android, this the last thing we need to do in iOS is to write a Renderer
for Custom Control.
Letās Export it!!!! š¤
And Setup Picker by Initializing PickerDateModel, setting toolbar, native Picker View and set text to label on layout. Same as on Android all that we done at OnElementChanged
, and I was eject it to separate function to make it more clear:
š„³š„³š„³ All work Done ā letās sum it up
So, unfortunately we donāt have such control out of box natively, but with knowledge of Android and iOS pickers and bindable properties in Xamarin Forms we can create our own š¤«
Code at GitHub met my view of this control and my expectation. You can copy/paste to your project and use it right away or update according to your project requirements by enhancing bindable properties or native picker behaviours, all up to you š
This Cool background was done just in couple lines in 1 minute by Magic Gradients:
Acknowledgement
Special thanks to Andrii Kharechko for supporting me during writing this article. Thanks bro š