TimeScroll

Functions summary

`Unit`	`@Composable TimeScroll( state: TimePickerState, shapes: TimePickerShapes, modifier: Modifier, colors: TimePickerColors )` Time pickers help users select and set a specific time.	Cmn
`Unit`	`@Composable TimeScroll( state: TimePickerState, shapes: TimePickerShapes, toggle: @Composable () -> Unit, modifier: Modifier, colors: TimePickerColors )` Time pickers help users select and set a specific time.	Cmn

Functions

TimeScroll

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha28

@Composable
fun TimeScroll(
    state: TimePickerState,
    shapes: TimePickerShapes,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.vibrantColors()
): Unit

Time pickers help users select and set a specific time.

Shows a vibrant time scroll picker that allows the user to enter the time via two ScrollField's, 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.TextButton
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.TimeScroll
import androidx.compose.material3.VibrantTimePickerDialog
import androidx.compose.material3.isInputValid
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var showTimePicker by rememberSaveable { mutableStateOf(false) }
val state = rememberTimePickerState()
val formatter = remember { SimpleDateFormat("hh:mm a", Locale.getDefault()) }
val snackState = remember { SnackbarHostState() }
var displayMode by rememberSaveable { 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) {
    VibrantTimePickerDialog(
        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())
        }
    }
}

Parameters
`state: TimePickerState`	state for this time picker, allows to subscribe to changes to `TimePickerState.hour` and `TimePickerState.minute`, and set the initial time for this picker
`shapes: TimePickerShapes`	the `TimePickerShapes` that will be used to resolve the shapes used for this time input in different states
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this time scroll picker
`colors: TimePickerColors = TimePickerDefaults.vibrantColors()`	colors `TimePickerColors` that will be used to resolve the colors used for this time input in different states. See `TimePickerDefaults.vibrantColors`.

TimeScroll

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha28

@Composable
fun TimeScroll(
    state: TimePickerState,
    shapes: TimePickerShapes,
    toggle: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    colors: TimePickerColors = TimePickerDefaults.vibrantColors()
): Unit

Time pickers help users select and set a specific time.

Shows an uncontained vibrant time scroll picker that allows the user to enter the time via two ScrollField's, one for minutes and one for hours Subscribe to updates through TimePickerState. Use this variant to implement time scroll with an input mode toggle, otherwise use the variant without toggle parameter.

import androidx.compose.foundation.layout.Box
import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerDefaults
import androidx.compose.material3.TimePickerDialog
import androidx.compose.material3.TimePickerDialogDefaults
import androidx.compose.material3.TimePickerDisplayMode
import androidx.compose.material3.TimeScroll
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val state = rememberTimePickerState()
var displayMode by remember { mutableStateOf(TimePickerDisplayMode.Scroll) }

val toggle =
    @Composable {
        TimePickerDialogDefaults.ScrollDisplayModeToggle(
            onDisplayModeChange = {
                displayMode =
                    if (displayMode == TimePickerDisplayMode.Scroll) {
                        TimePickerDisplayMode.Input
                    } else {
                        TimePickerDisplayMode.Scroll
                    }
            },
            displayMode = displayMode,
        )
    }

Box {
    if (displayMode == TimePickerDisplayMode.Input) {
        TimeInput(state = state, shapes = TimePickerDefaults.shapes(), toggle = toggle)
    } else {
        TimeScroll(state = state, shapes = TimePickerDefaults.shapes(), toggle = toggle)
    }
}

Parameters
`state: TimePickerState`	state for this timepicker, allows to subscribe to changes to `TimePickerState.hour` and `TimePickerState.minute`, and set the initial time for this picker.
`shapes: TimePickerShapes`	the `TimePickerShapes` that will be used to resolve the shapes used for this time input in different states.
`toggle: @Composable () -> Unit`	optional toggle to switch between different picker modes, e.g., switching between `TimeInput` and `TimeScroll`.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this time input
`colors: TimePickerColors = TimePickerDefaults.vibrantColors()`	colors `TimePickerColors` that will be used to resolve the colors used for this time input in different states. See `TimePickerDefaults.vibrantColors`.