Time pickers

Time pickers help users select and set a specific time.

Android Web Not available Flutter check iOS Not available
Image of a time picker in a mobile UI that has both a numeric display and a clock dial display of the time

Usage

Time pickers allow users to enter a specific time value. They can be used for a wide range of scenarios.

Common use cases include:

  • Setting an alarm
  • Scheduling a meeting

Mobile time pickers are displayed in dialogs and can be used to select hours, minutes, and a period of time.

Principles

Familiar

The analog clock face option provides an added level of assurance and confirmation when picking times.

Flexible

Input types are flexible in order to account for a range of use cases and contexts.

Ergonomic

Time can be selected without significant adjustment of one’s hand position on a mobile device.


Anatomy

Time pickers can appear in an immersive dialog, or inline and compact.

Mobile time picker

Mobile dialog diagram pointing out 5 elements. Time picker shows both text input and below is a clock dial. In the bottom right there are two actions: cancel, and OK. In the bottom left is a keyboard icon.
1. Title
2. Interactive display and time input for hour and minutes
3. Clock dial
4. Icon button to switch to time input
5. AM/PM selector

Mobile time input

Four-part diagram shows time input for keyboard entry with two textfields: one for hours and one for minutes. Following the time input is a toggle button for AM and PM.
1. Title
2. Hour and minute input field
3. Icon button to switch to dial entry
4. AM/PM selector

Behavior

There are two primary methods for selecting time with the mobile time picker. Users can:

  • Type in a specific value in the hour and minute fields.
  • Select the hour or minute field from the text input and adjust the clock dial below to simultaneously change the corresponding time field above.
Two time picker options side-by-side: A dial interface picker on the left and a text input picker on the right.
Mobile time pickers provide multiple methods of entry, from touch input through the dial (left) to text input via keyboard (right).
1. Time picker
2. Time input

The clock dial interface adapts to a device’s orientation. In landscape mode the stacked input and selection options are positioned side-by-side.

Mobile time picker in a landscape orientation puts the text entry method on the left and the dial picker on the right side of the screen.
Mobile time picker in landscape orientation.

Accessibility

On mobile devices, time pickers should allow manual time entry through text input, rather than exclusive use of the dial picker. The text input picker should be an available option that’s accessed from the dial picker when a user selects the keyboard icon. This interaction allows multiple input methods and makes the time picker accessible to assistive technology users.

Targets

Targets for mobile time pickers should be as large as possible filling the available space.


Theming

Crane Material Theme

Time pickers can be customized to express your brand identity by altering their layout, typography, shape, color, and motion.

This app's time pickers are customized to express Crane's brand identity by adjusting typography, shape, and colors.

1. Typography
2. Shape
3. Color

Color

Color can be used to create bold visual moments in a time picker.

This time picker users Crane’s brand colors.

Shape

The shape of the time picker can be customized to align with your brand's style.

1. Custom shape for time fields and range selector
2. Custom color and shape
3. Custom shape for time fields creates a visual pairing between hours and minutes

Specs

Mobile dial picker

On mobile, a date picker should allow users to enter dates manually by inputting text, without using the picker. This interaction allows multiple input methods...

The mobile time picker is a standard dialog.

Mobile time picker diagram overlaid with design specifications.
• Left and right padding: 24dp
• Input entry icon: 24 x 24dp
• First baseline: 28dp from top
• Dial width: 256dp
• Dial padding left and right: 36dp
• Numeric field: 24dp from bottom of title
• Numeric field height: 80dp

Mobile time input

Text input picker with design specifications overlaid
• Left padding: 24dp
• Right padding: 24dp
• Dial view icon: 24 x 24dp
• First baseline: 28dp from top
• Numeric field: 24dp from bottom of title
• Numeric field height: 70dp
• Numeric field width: 96dp
• Button right margin: 8dp
• Button bottom margin: 8dp

Landscape

Landscape view with text input fields on the lefthand side and clock dial picker on the righthand side with design specifications overlaid.
Specifications and measurements for dial view in landscape configuration
• Left padding: 24dp
• Right padding: 24dp
• Input entry icon: 24 x 24dp
• First baseline: 28dp from top
• Numeric field: 80dp from bottom of title
• Numeric field height: 80dp
• Numeric field width: 96dp
• Dial top margin: 36dp
• Dial width: 256dp
• Button right margin: 8dp
• Button bottom margin: 8dp

Using time pickers

Before you can use Material time pickers, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Usage

"Image of a time picker in 12H format and one in 24H format."

API and source code:

A time picker can be instantiated with MaterialTimePicker.Builder

minute is a [0, 60) value and hour is a [0, 23] value regardless of which time format you choose.

You can use either TimeFormat.CLOCK_12H or TimeFormat.CLOCK_24H, depending on the locale of the device:

The time picker can be started in text input mode with:

To show the time picker to the user:

Subscribe to positive button click, negative button click, cancel and or dismiss events with the following calls:

You can get the user selection with picker.minute and picker.hour.

Making time pickers accessible

Material time pickers are fully accessible and compatible with screen readers. The title of your time picker will be read when the user launches the dialog. Use a descriptive title that for the task:

Anatomy and key properties

A Time Picker has a title, an input method, a clock dial, an icon to switch input and an AM/PM selector.

Time Picker anatomy diagram

  1. Title
  2. Interactive display and time input for hour and minutes
  3. Clock dial
  4. Icon button to switch to time input
  5. AM/PM selector

Attributes

ElementAttributeRelated method(s)Default value
HourN/ABuilder.setHour
MaterialTimePicker.getHour
0
MinuteN/ABuilder.setMinute
MaterialTimePicker.getMinute
0
TitleN/ABuilder.setTitleSelect Time
Keyboard Iconapp:keyboardIconN/A@drawable/ic_keyboard_black_24dp
Clock Iconapp:clockIconN/A@drawable/ic_clock_black_24dp
Clock face Background Colorapp:clockFaceBackgroundColorN/A?attr/colorOnSurface 24%
Clock hand colorapp:clockNumberTextColorN/A?attr/colorPrimary
Clock Number Text Colorapp:clockNumberTextColorN/A?attr/colorOnSurface

Styles

ElementStyle
Default styleWidget.MaterialComponents.TimePicker

Default style theme attribute: ?attr/materialTimePickerStyle

The style attributes are assigned to the following components:

ElementAffected componentDefault
chipStyleNumber inputs in the clock mode@style/Widget.MaterialComponents.TimePicker.Display
materialButtonOutlinedStyleAM/PM toggle@style/Widget.MaterialComponents.TimePicker.Button
imageButtonStyleKeyboard/Text Input button@style/Widget.MaterialComponents.TimePicker.ImageButton
materialClockStyleClock Face of the Time Picker@style/Widget.MaterialComponents.TimePicker.Clock

See the full list of styles and attributes.

Theming time pickers

Time Pickers support Material Theming and can be customized in terms of color and typography.

Time picker theming example

The following example shows a Time Picker with Material Theming.

"Time Picker pink interactive display, grey background, and brown icons and text."

Using theme attributes and styles in res/values/styles.xml (themes all time pickers and affects other components):

In res/color/shrine_diplay_text_color.xml:

You can also set a theme specific to the time picker

No Android implementation guidance available
No Web implementation guidance available

Using time pickers

Time pickers allow users to enter a specific time value. They can be used for a wide range of scenarios.

Common use cases include:

  • Setting an alarm
  • Scheduling a meeting

Mobile time pickers are displayed in dialogs and can be used to select hours, minutes, and a period of time

Making time pickers accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

Types

The following types are for non-iOS platforms

There are two types of time pickers: 1. mobile time pickers, and 2. mobile time input pickers:

Time picker composite. Image 1 shows a digital input over a 12 hour dial input. Image 2 shows a digital input

Mobile time pickers

Mobile time pickers can be used to specify time down to hours and minutes in a time period. They are displayed in a dialog.

Mobile time pickers allow selection of hours and minutes. They aren’t ideal for selecting granular amounts of time, such as milliseconds for a stopwatch application.

Mobile time pickers example

showTimePicker

The following example shows a time picker.

Time picker with dial set to 7 and input showing 7:15AM

Anatomy and key properties

Mobile time picker anatomy diagram

  1. Title
  2. Interactive display and time input for hour and minutes
  3. Clock dial
  4. Icon button to switch to time input
  5. AM/PM selector

Title

 Property
TexthelpText property in showTimePicker
Text StylehelpTextStyle property in TimePickerThemeData

Clock dial

 Property
Background ColordialBackgroundColor property in TimePickerThemeData
Hand ColordialHandColor property in TimePickerThemeData
Text ColordialTextColor property in TimePickerThemeData

Input type toggle

 Property
ColorentryModeIconColor property in TimePickerThemeData

AM/PM selector

 Property
BorderdayPeriodBorderSide property in TimePickerThemeData
ShapedayPeriodShape property in TimePickerThemeData
ColordayPeriodColor property in TimePickerThemeData
Text ColordayPeriodTextColor property in TimePickerThemeData
Text StyledayPeriodTextStyle property in TimePickerThemeData

Mobile time input pickers

Mobile time input pickers allow users to specify time using the numbers on a keyboard. The mobile time input picker can be accessed from any other mobile time picker interface by tapping the keyboard icon

Mobile time input picker example

showTimePicker

The following example shows a time input picker.

Time picker input set to 7:15AM

Anatomy and key properties

Mobile time input picker anatomy diagram

  1. Title
  2. Hour and minute input field
  3. Icon button to switch to dial entry
  4. AM/PM selector

Title

 Property
TexthelpText property in showTimePicker
Text StylehelpTextStyle property in TimePickerThemeData

Hour and minute input

 Property
StyleinputDecorationTheme property in TimePickerThemeData

Input type toggle

 Property
ColorentryModeIconColor property in TimePickerThemeData

AM/PM selector

 Property
BorderdayPeriodBorderSide property in TimePickerThemeData
ShapedayPeriodShape property in TimePickerThemeData
ColordayPeriodColor property in TimePickerThemeData
Text ColordayPeriodTextColor property in TimePickerThemeData
Text StyledayPeriodTextStyle property in TimePickerThemeData

Theming time pickers

The following example shows a mobile time picker that uses the Shrine theme:

Time picker set to 7:15AM, selected hour in pink and other text in brown

No Flutter implementation guidance available
No iOS implementation guidance available

Up next