Ultimate Guide to Material 3 Time Pickers in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Time Pickers are modals that allow users to select a specific time, supporting clock or keyboard input modes in 12H or 24H formats. This guide covers their implementation, accessibility, and theming for 2025 using MaterialTimePicker. ⏰

Design and API Documentation 🔗

Using Time Pickers 🤖

Add the Material Components for Android library dependency to use Material 3 Time Pickers. See the Get Started guide. Instantiate with MaterialTimePicker.Builder, configure format and input mode, and display as a dialog, with a Theme.Material3.* theme. 🛠️

Making Time Pickers Accessible ♿

Time pickers are fully compatible with screen readers like TalkBack. Set a descriptive setTitleText to announce the picker’s purpose. Ensure sufficient contrast for text and icons. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure time format (12H/24H), input mode (clock/keyboard), and initial time. Handle user selections with listeners for positive/negative button clicks, cancel, or dismiss events. Example:

      
val picker = MaterialTimePicker.Builder()
    .setTimeFormat(TimeFormat.CLOCK_12H)
    .setHour(10)
    .setMinute(30)
    .setTitleText("Set Alarm")
    .build()
picker.addOnPositiveButtonClickListener {
    val time = "${picker.hour}:${picker.minute}"
    // Use selected time
}
picker.show(supportFragmentManager, "timePicker")

Time Picker Anatomy 🌟

Material 3 Time Pickers include a title, interactive time input (clock or keyboard), clock dial, input mode switch icon, and AM/PM selector. ⏰

Title: Describes picker purpose.
Time Input: Clock dial or numeric fields. 🕒
Switch Icon: Toggles input mode. 🔄
AM/PM Selector: For 12H format. 🌞

Time Picker Example 🔲

Time Pickers provide a modal interface for precise time selection in 12H or 24H formats. ⏰

Time Picker Example 💻

API and source code:

MaterialTimePicker
- Class description
- Class source

The following example shows a 24H time picker in keyboard input mode.

      
val isSystem24Hour = is24HourFormat(this)
val picker = MaterialTimePicker.Builder()
    .setTimeFormat(TimeFormat.CLOCK_24H)
    .setInputMode(MaterialTimePicker.INPUT_MODE_KEYBOARD)
    .setHour(14)
    .setMinute(45)
    .setTitleText("Set Meeting Time")
    .build()
picker.addOnPositiveButtonClickListener {
    val time = "${picker.hour}:${picker.minute}"
    // Use selected time
}
picker.show(supportFragmentManager, "timePicker")

Anatomy and Key Properties 📏

A time picker includes a title, time input, clock dial, input mode switch, and AM/PM selector (12H). ⏰

Title: Contextual description.
Time Input: Numeric or clock-based. 🕒
Switch Icon: Clock/keyboard toggle. 🔄

Attributes 📋

Element	Attribute	Related method(s)	Default value
Hour	N/A	`Builder.setHour`	0
Minute	N/A	`Builder.setMinute`	0
Title	N/A	`Builder.setTitleText`	"Select Time"
Clock Face	`app:clockFaceBackgroundColor`	N/A	`?attr/colorSurfaceContainerHighest`

Styles 🎨

Default style: Widget.Material3.MaterialTimePicker
Default theme attribute: ?attr/materialTimePickerStyle

See the full list of styles and attrs. 🔗

Theming Time Pickers 🖌️

Material Theming customizes time picker colors and typography. 🎨

Theming Example 💻

Theming example for time pickers:

Specific styles for time pickers:

FAQ ❓

What are Material 3 Time Pickers? 🤔

Modals for selecting a specific time. ✅

What formats are supported? 🔢

12H and 24H, with clock or keyboard input. ⏰

How to make them accessible? ♿

Set descriptive title text for TalkBack compatibility. 🗣️

Can I customize appearance? 🎨

Yes, theme colors and typography via res/values/styles.xml. 🖌️

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for time pickers. 🚀

Search This Blog

BoltUiX

Ultimate Guide to Material 3 Time Pickers in Android XML (2025 Tutorial + Examples)