Material 3 Time Picker

Overview

Time pickers help users select and set a specific time.

Material 3 Time Pickers are modal dialogs that support clock or keyboard input in 12H or 24H formats, using MaterialTimePicker per Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Time Pickers

• Add Material Components for Android library dependency
• Instantiate with MaterialTimePicker.Builder
• Configure format (12H/24H), input mode (clock/keyboard)
• Display as dialog with Theme.Material3.* theme

Accessibility

• Compatible with TalkBack screen readers
• Set descriptive setTitleText for purpose
• Ensure high contrast for text and icons

Behavior and Configuration

• Configure time format, input mode, initial time
• Handle selections with listeners for button clicks, cancel, dismiss

      
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

• Title: Describes picker purpose
• Time Input: Clock dial or numeric fields
• Switch Icon: Toggles clock/keyboard input
• AM/PM Selector: Used in 12H format

Time Picker Example

• Modal interface for precise time selection
• Supports 12H or 24H formats
• Uses MaterialTimePicker

Example

      
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")
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Hour	N/A	Builder.setHour	0	Sets initial hour value	All
Minute	N/A	Builder.setMinute	0	Sets initial minute value	All
Title	N/A	Builder.setTitleText	"Select Time"	Sets descriptive title for accessibility	All
Clock Face	app:clockFaceBackgroundColor	N/A	?attr/colorSurfaceContainerHighest	Sets clock face background color	Clock Input
Time Format	N/A	Builder.setTimeFormat	System default	Sets 12H or 24H format	All
Input Mode	N/A	Builder.setInputMode	INPUT_MODE_CLOCK	Sets clock or keyboard input mode	All

Styles

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

Theming Time Pickers

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialTimePickerTheme">@style/ThemeOverlay.App.TimePicker</item>
</style>
<style name="ThemeOverlay.App.TimePicker" parent="">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="chipStyle">@style/Widget.App.Chip</item>
</style>
<style name="Widget.App.Chip" parent="Widget.Material3.MaterialTimePicker.Display">
    <item name="android:textColor">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Time Pickers
• Covers design, behavior, theming specifications
• Includes structure, input modes, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Time Pickers?

• Modals for selecting specific times

---

What formats are supported?

• 12H and 24H with clock or keyboard input

---

How to make them accessible?

• Set descriptive title text for TalkBack

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for time pickers