TimePicker

Functions summary

Unit
@RequiresApi(value = 26)
@Composable
TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier,
    timePickerType: TimePickerType,
    colors: TimePickerColors,
    initialSelection: TimePickerSelection
)

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

Functions

TimePicker

@RequiresApi(value = 26)
@Composable
fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
    initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)
): Unit

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.

For custom backgrounds like gradients or images wrap the TimePicker in a MaterialTheme with the colorScheme background set to Color.Unspecified.

Example of a TimePicker:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter =
            DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
                .withLocale(LocalConfiguration.current.locales[0])

        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a TimePicker with seconds:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.HoursMinutesSeconds24H,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a 12 hour clock TimePicker:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.HoursMinutesAmPm12H,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("hh:mm a")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a TimePicker with just minutes and seconds:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.MinutesSeconds,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("mm:ss")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}
Parameters
initialTime: LocalTime

The initial time to be displayed in the TimePicker.
onTimePicked: (LocalTime) -> Unit

The callback that is called when the user confirms the time selection. It provides the selected time as LocalTime. Note that any time components not displayed in the picker (e.g. the hour for TimePickerType.MinutesSeconds, or the second for TimePickerType.HoursMinutes24H) will have a default value of 0 in the returned LocalTime.
modifier: Modifier = Modifier

Modifier to be applied to the Box containing the UI elements.
timePickerType: TimePickerType = TimePickerDefaults.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 = TimePickerDefaults.timePickerColors()

TimePickerColors be applied to the TimePicker.
initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)

The initial time component to be selected when the TimePicker is first displayed. By default, this is the first available time component based on the timePickerType and the device's locale (e.g., the hour component for a TimePickerType.HoursMinutes24H picker). If a TimePickerSelection is provided that is not applicable to the current timePickerType (such as providing TimePickerSelection.Second for a picker that does not display seconds), the selection will fall back to the first available time component.