Start native apps faster with the Composables CLI ->
Compose Component

TimeScroll

Time pickers help users select and set a specific time.

RichTimePickerScrollSample

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun RichTimePickerScrollSample() {
    var showTimePicker by remember { mutableStateOf(false) }
    val state = rememberTimePickerState()
    val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
    val snackState = remember { SnackbarHostState() }
    var displayMode by remember { mutableStateOf(TimePickerDisplayMode.Scroll) }
    val snackScope = rememberCoroutineScope()
    Box(propagateMinConstraints = false) {
        Button(modifier = Modifier.align(Alignment.Center), onClick = { showTimePicker = true }) {
            Text("Set Time (Switchable, Scroll)")
        }
        SnackbarHost(hostState = snackState)
    }
    if (showTimePicker) {
        RichTimePickerDialog(
            onDismissRequest = { showTimePicker = false },
            confirmButton = {
                TextButton(
                    enabled = state.isInputValid,
                    onClick = {
                        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
                    },
                ) {
                    Text("OK")
                }
            },
            dismissButton = { TextButton(onClick = { showTimePicker = false }) { Text("Cancel") } },
            modeToggleButton = {
                TimePickerDialogDefaults.ScrollDisplayModeToggle(
                    onDisplayModeChange = {
                        displayMode =
                            if (displayMode == TimePickerDisplayMode.Scroll) {
                                TimePickerDisplayMode.Input
                            } else {
                                TimePickerDisplayMode.Scroll
                            }
                    },
                    displayMode = displayMode,
                )
            },
        ) {
            if (displayMode == TimePickerDisplayMode.Input) {
                TimeInput(state = state, shapes = TimePickerDefaults.shapes())
            } else {
                TimeScroll(state = state, shapes = TimePickerDefaults.shapes())
            }
        }
    }
}

Last updated: