TimePicker

Component in Wear Material 3 Compose

A full screen TimePicker with configurable columns that allows users to select a time.

This component is designed to take most/all of the screen and utilizes large fonts.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

@RequiresApi(Build.VERSION_CODES.O)
@Composable
fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
)

Parameters

name	description
initialTime	The initial time to be displayed in the TimePicker.
onTimePicked	The callback that is called when the user confirms the time selection. It provides the selected time as [LocalTime].
modifier	Modifier to be applied to the Box containing the UI elements.
timePickerType	The different [TimePickerType] supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes.
colors	[TimePickerColors] be applied to the TimePicker.

Code Examples

TimePickerSample

@Composable
fun TimePickerSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter =
        DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
            .withLocale(LocalConfiguration.current.locales[0])
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            initialTime = timePickerTime // Initialize with last picked time on reopen
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Selected Time")
            Spacer(Modifier.height(12.dp))
            Button(
                onClick = { showTimePicker = true },
                label = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}

TimePickerWithSecondsSample

@Composable
fun TimePickerWithSecondsSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesSeconds24H,
            initialTime = timePickerTime // Initialize with last picked time on reopen
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Selected Time")
            Spacer(Modifier.height(12.dp))
            Button(
                onClick = { showTimePicker = true },
                label = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}

TimePickerWith12HourClockSample

@Composable
fun TimePickerWith12HourClockSample() {
    var showTimePicker by remember { mutableStateOf(true) }
    var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
    val formatter = DateTimeFormatter.ofPattern("hh:mm a")
    if (showTimePicker) {
        TimePicker(
            onTimePicked = {
                timePickerTime = it
                showTimePicker = false
            },
            timePickerType = TimePickerType.HoursMinutesAmPm12H,
            initialTime = timePickerTime // Initialize with last picked time on reopen
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Selected Time")
            Spacer(Modifier.height(12.dp))
            Button(
                onClick = { showTimePicker = true },
                label = { Text(timePickerTime.format(formatter)) },
                icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
            )
        }
    }
}