A highly customizable time picker for Jetpack Compose. Material3 theme-compatible.
Minimal working example of a timepicker dialog usage (see below for parameter descriptions):
var isDialogShown: Boolean by rememberSaveable {
mutableStateOf(false)
}
val (selectedTime, setSelectedTime) = rememberSaveable {
mutableStateOf(LocalTime.now().noSeconds())
}
if (isDialogShown) {
TimePickerDialog(
onDismissRequest = { isDialogShown = false },
initialTime = selectedTime,
onTimeChange = {
setSelectedTime(it)
isDialogShown = false
},
title = { Text(text = "Select time") }
)
}
TimePickerDialog
with all parameters:
@Composable
fun TimePickerDialog(
onDismissRequest: () -> Unit,
onTimeChange: (LocalTime) -> Unit,
modifier: Modifier = Modifier,
initialTime: LocalTime = LocalTime.now().noSeconds(),
locale: Locale = LocalConfiguration.current.getDefaultLocale(),
is24HourFormat: Boolean = DateFormat.is24HourFormat(LocalContext.current),
colors: TimePickerColors = TimePickerDefaults.colors(),
shapes: TimePickerShapes = TimePickerDefaults.shapes(),
typography: TimePickerTypography = TimePickerDefaults.typography(),
title: @Composable (() -> Unit)? = null,
buttonColors: ButtonColors = ButtonDefaults.textButtonColors(),
shape: Shape = AlertDialogDefaults.shape,
containerColor: Color = AlertDialogDefaults.containerColor,
tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
properties: DialogProperties = DialogProperties(),
)
onDismissRequest
- called when the dialog should be dismissed without user selecting a valueonTimeChange
- called when user selected a value, passing it as a parametermodifier
- aModifier
for the root@Composable
initialTime
- an initially-selectedLocalTime
locale
-java.util.Locale
used to display user-visible strings, such as AM/PM stringsis24HourFormat
- whether or not to show the 24-hour pickercolors
- an instance ofTimePickerColors
used to theme the component (see below for more info)shapes
- an instance ofTimePickerShapes
used to theme the component (see below for more info)typography
- an instance ofTimePickerTypography
used to theme the component (see below for more info)title
- a@Composable
slot for the dialog title - usually{ Text("Select time") }
or similarbuttonColors
- an instance of Material'sButtonColors
to customize the appearance of dialog buttonsshape
- the shape of theAlertDialog
containerColor
- the container color of theAlertDialog
tonalElevation
- the tonal elevation of theAlertDialog
properties
-DialogProperties
of theAlertDialog
Timepicker dialog provides several ways of customizing its looks. Starting with is24HourFormat
, continuing to the more complex combination of different Color
, Shape
and Typography
.
Timepicker dialog offers out-of-the-box support for light/dark theming and Material You dynamic colors, as long as your MaterialTheme
is defined correctly.
The components use the design tokens that reference attributes from the MaterialTheme
.
For example, passing
TimePickerDialog(
// ...
shapes = TimePickerDefaults.shapes(
clockDigitsShape = CutCornerShape(topStart = 16.dp, topEnd = 3.dp, bottomStart = 0.dp, bottomEnd = 24.dp),
amPmSwitchShape = CircleShape,
),
)
produces
In the similar way you can customize colors
, typography
, and even the looks of the AlertDialog
itself.
For default values see TimePickerDefaults.
Newly, there is a possibility to alter dialog buttons' colors using the buttonColors
parameter. Simply pass an instance of ButtonColors
:
TimePickerDialog(
//...,
buttonColors = ButtonDefaults.textButtonColors(
contentColor = yourDesiredColor,
),
//...,
)