The new Android Material TimePicker in Google’s Material Design

The new Material TimePicker (Light and Dark Design)

After implementing the good looking Material DatePicker I was wondering why there is still no Material TimePicker that could replace the classic TimePicker.
I couldn’t find anything about it and my last idea was to go directly to the Material Components Github repo. In the component list I finally found it, the new TimePicker.

You can’t find anything about it because it is “new” and still only available in pre-release versions.
It was first included in version 1.3.0-alpha02 on Juli 23th under the name MaterialTimePicker .
On November 13th the guidelines for this new widget were published on the Material Design website.

Customization

There are four options to customize your TimePicker with:

• Time Format: 24 Hour clock, 12 Hour clock (default: 12 Hour)
• Starting time (default: 12:00 am)
• Input mode: Keyboard, Clock (default: Clock)
• Title (default: “SELECT TIME”)

Design

Above you can see screenshots of the TimePicker (from components version 1.3.0-beta01) in light and dark mode.
In general it looks much more modern and just awesome compared to the framework TimePicker (shown below), which became a little “old looking” over time.
Because apps have used the old picker for a long time now we have to get used to the new design but I think it is a great redesign.

The old TimePicker (Light and Dark Design)

It works completely similiar to the framework picker: You can switch between two input types, a circular input field (like a clock) and a text based input field.
Furthermore the colors look more pleasant and don’t burn into your eyes with that colored banner at the top.

As usual you can play around with colors and themes and achieve something like this (example from guidelines page):

There’s also a landscape layout, which is apparently still a bit buggy on my 5.1 inch 16:9 display, it for sure performs better on bigger displays.

The screenshots were all made in the official Material Components Catalog App, you can either build it on your own or download my built apk file of version 1.3.0-beta01 HERE.

Implementation

For using this awesome widget you first of all need to add the Google Material dependency with a minimum version of 1.3.0-alpha02:

implementation 'com.google.android.material:material:currentVersion'

I would always recommend choosing a newer version because every update brings new bugfixes, I’m currently using 1.3.0-alpha03 and I did not encounter any problems yet.

Get the TimePicker builder first and then customize the picker as you want it:

val builder = MaterialTimePicker.Builder()
    .setTimeFormat(format: Int)
    .setHour(hour: Int)
    .setMinute(minute: Int)
    .setTitleText(titleTextResId: Int / charSequence: CharSequence)
    .setInputMode(inputMode: Int)

To get the TimePicker dialog just call build() on the builder.
The last thing you have to do is to call show(manager: FragmentManager, tag: String?) :

val myTimePicker = builder.build()
myTimePicker.show(supportFragmentManager, myTimePicker.tag)

If everything worked, you should now see the new Material TimePicker.

The only things left you can do with the picker is adding and removing listeners for button clicks or cancel events, which e.g. looks like this:

myTimePicker.addOnPositiveButtonClickListener {
    val h = myTimePicker.hour
    val min = myTimePicker.minute
    println("Chosen time: $h hours and $min minutes.")
}

As you can see you simply retrieve the chosen time by calling getHour() and getMinute() (or the Kotlin alternative as used above).

I hope you enjoyed my summary and you will love the new TimePicker.
Please show some love and HAPPY DEVELOPING!