{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

TimePickerKt

public final class TimePickerKt


Summary

Public methods

static final void

Time pickers help users select and set a specific time.

static final void

Material Design time picker.

static final @NonNull TimePickerState
@Composable
@ExperimentalMaterial3Api
rememberTimePickerState(
    int initialHour,
    int initialMinute,
    boolean is24Hour
)

Creates a TimePickerState for a time picker that is remembered across compositions and configuration changes.

Public methods

TimeInput

@Composable
@ExperimentalMaterial3Api
public static final void TimeInput(
    @NonNull TimePickerState state,
    @NonNull Modifier modifier,
    @NonNull TimePickerColors colors
)

Time pickers help users select and set a specific time.

Shows a time input that allows the user to enter the time via two text fields, one for minutes and one for hours Subscribe to updates through TimePickerState

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Button
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.Dialog

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()

Box(propagateMinConstraints = false) {
    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showTimePicker = true }
    ) {
        Text("Set Time")
    }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        onCancel = { showTimePicker = false },
        onConfirm = {
            val cal = Calendar.getInstance()
            cal.set(Calendar.HOUR_OF_DAY, state.hour)
            cal.set(Calendar.MINUTE, state.minute)
            cal.isLenient = false
            snackScope.launch {
                snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
            }
            showTimePicker = false
        },
    ) {
        TimeInput(state = state)
    }
}
Parameters
@NonNull TimePickerState state

state for this timepicker, allows to subscribe to changes to TimePickerState.hour and TimePickerState.minute, and set the initial time for this picker.

@NonNull Modifier modifier

the Modifier to be applied to this time input

@NonNull TimePickerColors colors

colors TimePickerColors that will be used to resolve the colors used for this time input in different states. See TimePickerDefaults.colors.

TimePicker

@Composable
@ExperimentalMaterial3Api
public static final void TimePicker(
    @NonNull TimePickerState state,
    @NonNull Modifier modifier,
    @NonNull TimePickerColors colors,
    @NonNull TimePickerLayoutType layoutType
)

Material Design time picker.

Time pickers help users select and set a specific time.

Shows a picker that allows the user to select time. Subscribe to updates through TimePickerState

Time picker image

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Button
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TimePicker
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.Dialog

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val snackScope = rememberCoroutineScope()

Box(propagateMinConstraints = false) {
    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showTimePicker = true }
    ) {
        Text("Set Time")
    }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        onCancel = { showTimePicker = false },
        onConfirm = {
            val cal = Calendar.getInstance()
            cal.set(Calendar.HOUR_OF_DAY, state.hour)
            cal.set(Calendar.MINUTE, state.minute)
            cal.isLenient = false
            snackScope.launch {
                snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
            }
            showTimePicker = false
        },
    ) {
        TimePicker(state = state)
    }
}
import androidx.compose.foundation.layout.Box
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Keyboard
import androidx.compose.material.icons.outlined.Schedule
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.window.Dialog

var showTimePicker by remember { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
val showingPicker = remember { mutableStateOf(true) }
val snackScope = rememberCoroutineScope()
val configuration = LocalConfiguration.current

Box(propagateMinConstraints = false) {
    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showTimePicker = true }
    ) {
        Text("Set Time")
    }
    SnackbarHost(hostState = snackState)
}

if (showTimePicker) {
    TimePickerDialog(
        title = if (showingPicker.value) {
            "Select Time "
        } else {
            "Enter Time"
        },
        onCancel = { showTimePicker = false },
        onConfirm = {
            val cal = Calendar.getInstance()
            cal.set(Calendar.HOUR_OF_DAY, state.hour)
            cal.set(Calendar.MINUTE, state.minute)
            cal.isLenient = false
            snackScope.launch {
                snackState.showSnackbar("Entered time: ${formatter.format(cal.time)}")
            }
            showTimePicker = false
        },
        toggle = {
            if (configuration.screenHeightDp > 400) {
                IconButton(onClick = { showingPicker.value = !showingPicker.value }) {
                    val icon = if (showingPicker.value) {
                        Icons.Outlined.Keyboard
                    } else {
                        Icons.Outlined.Schedule
                    }
                    Icon(
                        icon,
                        contentDescription = if (showingPicker.value) {
                            "Switch to Text Input"
                        } else {
                            "Switch to Touch Input"
                        }
                    )
                }
            }
        }
    ) {
        if (showingPicker.value && configuration.screenHeightDp > 400) {
            TimePicker(state = state)
        } else {
            TimeInput(state = state)
        }
    }
}

state state for this timepicker, allows to subscribe to changes to TimePickerState.hour and TimePickerState.minute, and set the initial time for this picker.

Parameters
@NonNull TimePickerState state

state for this time input, allows to subscribe to changes to TimePickerState.hour and TimePickerState.minute, and set the initial time for this input.

@NonNull Modifier modifier

the Modifier to be applied to this time input

@NonNull TimePickerColors colors

colors TimePickerColors that will be used to resolve the colors used for this time picker in different states. See TimePickerDefaults.colors.

@NonNull TimePickerLayoutType layoutType

, the different TimePickerLayoutType supported by this time picker, it will change the position and sizing of different components of the timepicker.

rememberTimePickerState

@Composable
@ExperimentalMaterial3Api
public static final @NonNull TimePickerState rememberTimePickerState(
    int initialHour,
    int initialMinute,
    boolean is24Hour
)

Creates a TimePickerState for a time picker that is remembered across compositions and configuration changes.

Parameters
int initialHour

starting hour for this state, will be displayed in the time picker when launched Ranges from 0 to 23

int initialMinute

starting minute for this state, will be displayed in the time picker when launched. Ranges from 0 to 59

boolean is24Hour

The format for this time picker. false for 12 hour format with an AM/PM toggle or true for 24 hour format without toggle. Defaults to follow system setting.