Aneke Peter

Mobile Developer

How To Use New Material Date Picker for Android

Hello everyone, Google recently released MaterialDatePicker: a useful new component that complies with the material design guidelines(
). This new component has a very interesting feature that allows you to select a date range instead of the old flow of selecting two dates: one "from" and one "to, i.e the component can be used as a DatePicker and a DateRangePicker. I was very excited about this and i wanted to use this in an update to a project i work on: to improve the user experience, sadly i could not find any examples or tutorials on using this lovely new component. So, I decided to make one, in this article I will be outlining the steps I took to make use of the MaterialDatePicker. This would be a really short article since, the MaterialDatePicker is really very easy to use.
1. Firstly, we have to add the Material Design component library. So in the list of dependencies in your app-level
file. Add
at the time of this publication the latest release is
. You can find the latest-release version number at
2. Now, we have to initialize a builder, there are two ways of doing this, depending on the type of MaterialDatePicker you want. If you want one in which you can select only one date. You can do that like so:
//Date Picker
val builder = MaterialDatePicker.Builder.datePicker()
This would look like this:
If you need a MaterialDatePicker you can use to select a range of dates you can do that like so:
//Date Range Picker
val builder = MaterialDatePicker.Builder.dateRangePicker()
3. Now, it's time to create the picker, irrespectively of the builder you choose, you can always create a builder by calling:
val picker =
to show the picker, we call:, picker.toString())
and thats all!!. However, we would always need to know what happens in our picker dialog. Let's do this in the next step.
4. We would need to add three listeners for different scenarios, first lets handle the scenario when the dialog is cancelled:
  picker.addOnCancelListener {
   Log.d("DatePicker Activity", "Dialog was cancelled")
Now, we handle the scenario, where the dialog's negative button is clicked:
 picker.addOnNegativeButtonClickListener {
 Log.d("DatePicker Activity", "Dialog Negative Button was clicked") 
Finally, we have to cater for a successful operation. Depending on the type of MaterialDatePicker you have built, we can handle this in one of two ways. For a DatePicker, the selected value would be passed a unix epoch time value in a Long variable that is accessible as an argument in the PositiveButtonClickedListener lambda, it can also be read as a string in the header text of the Picker( Jan 10, Jul 28 etc). This is shown below
picker.addOnPositiveButtonClickListener { 
Log.d("DatePicker Activity", "Date String = ${picker.headerText}:: Date epoch value = ${it}")
When using a date range picker the epoch values would be passed as a Pair object containing two Longs (
Pair<Long, Long>
). This can be handled as shown below:
 picker.addOnPositiveButtonClickListener {
 Log.d("DatePicker Activity", "Date String = ${picker.headerText}::  Date epoch values::${it.first}:: to :: ${it.second}")
That's all folks, thanks for reading this till the end, i hope i have been able to shed more light on this cool new feature. Please provide feedback if you think this article can be improved. Thank you!



January 19th, 2020

That’s a super cool post! I’m super excited about this new picker.

But it will be nice if you can define the picker to only select those fields of you are interested for.
For example. Right now i only want to request the month and the year, and i can’t find the way to hide the calendar and the day in the title. Is this possible with the new MaterialDatePicker?


January 20th, 2020

To be honest i am not sure if the picker can be setup to behave in that way. But i know you can set constraints on the Picker’s nature using CalenderConstraints.Builder, i am not just not certain if theses constraints currently include field limitations

January 20th, 2020

Thanks for your answer. It’s a real pity that it can’t be configured like that. It will make the picker more comfortable to create new functionalities.

In my case, I solved it using the spinner picker desing (deprecated right now) and hiding fields, but i don’t really like that.

January 21st, 2020

Hopefully it would come in on a later version

More by Aneke Peter

Topics of interest