How To Use New Material Date/DateRange Picker for Android

Hello everyone, Google recently released MaterialDatePicker: a useful new component that complies with the material design guidelines(

https://material.io/components/pickers/#usage

1. Firstly, we have to add the Material Design component library. So in the list of dependencies in your app-level

build.gradle

implementation'com.google.android.material:material:1.2.0-alpha03'

at the time of this publication the latest release is

'1.2.0-alpha03'

https://github.com/material-components/material-components-android/releases

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 = builder.build()

to show the picker, we call:

picker.show(supportFragmentManager, 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>

 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!