[Android] TimePicker/TimePicker Dialog spinner/clock mode

TimePicker and TimePickerDialog can be presented in two different modes: spinner and clock.

Spinner mode

Clock mode

[TimePicker/TimePickerDialog] clock mode (default):

Usually clock mode is the default setting, so clock mode can be set without any extra attributes.

TimePicker: Clock mode (default)

TimePickerDialog: Clock mode (default)

[TimePicker] clock/spinner mode (xml attribute):

Changing view mode of TimePicker is simple. Adding the xml attribute below would switch between modes.

android:timePickerMode=“clock” / “spinner”

TimePicker: Spinner mode

TimePicker: Clock mode

Unlike TimePicker, there is no direct interface to set xml attribute to the TimePickerDialog, this method does not work for TimePickerDialog.

[TimePicker/TimePickerDialog] clock/spinner mode (style):

Here is the method that works for both TimePicker and TimePickerDialog.

1. create new TimePicker style
2. override android:timePickerStyle

create MyTimePickerStyle in styles.xml file: Spinner mode

create MyTimePickerStyle in styles.xml file: Clock mode

override android:timePickerStyle in themes.xml

NOTE: Theme.MyApp should be used as the target Application/Activity theme

After create new TimePickerStyle and set it as android:timePickerStyle, all your TimePicker and TimePickerDialog will be presented in the mode you selected without extra attributes.

TimePicker: Clock/Spinner mode depending on MyTimePickerStyle

TimePickerDialog: Clock/Spinner mode depending on MyTimePickerStyle

Extra: what happens if you set different timePickerMode under both MyTimePickerStyle and TimePicker component in layout.xml?

→ TimePicker will follow the xml attribute under TimePicker component in layout.xml. The xml attribute under View component declaration has higher priority than the one in the theme.xml.