PickerGroup
Composable Component
A group of Picker
s to build components where multiple pickers are required to be combined
together. At most one Picker
can be selected at a time. When touch exploration services are
enabled, the focus moves to the picker which is clicked.
Android
@Composable
public fun PickerGroup(
modifier: Modifier = Modifier,
selectedPickerState: PickerState? = null,
autoCenter: Boolean = true,
propagateMinConstraints: Boolean = false,
content: @Composable PickerGroupScope.() -> Unit,
)
Parameters
selectedPickerState | The PickerState of the Picker that is selected. Null value means that no Picker is selected. |
modifier | Modifier to be applied to the PickerGroup . |
autoCenter | Indicates whether the selected Picker should be centered on the screen. It is recommended to set this as true when all the pickers cannot be fit into the screen. Or provide a mechanism to navigate to pickers which are not visible on screen. If false, the whole row containing pickers would be centered. |
propagateMinConstraints | Whether the incoming min constraints should be passed to content. |
content | The content of the PickerGroup as a container of Picker s. |
Code Examples
AutoCenteringPickerGroup
@Composable
fun AutoCenteringPickerGroup() {
var selectedPickerIndex by remember { mutableIntStateOf(0) }
val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateSeconds = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateMilliSeconds = rememberPickerState(initialNumberOfOptions = 1000)
val pickerStates = remember {
arrayOf(pickerStateHour, pickerStateMinute, pickerStateSeconds, pickerStateMilliSeconds)
}
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
val headingText = mapOf(0 to "Hours", 1 to "Minutes", 2 to "Seconds", 3 to "Milli")
Spacer(modifier = Modifier.size(30.dp))
AnimatedContent(targetState = headingText[selectedPickerIndex]!!) { targetText ->
Text(text = targetText)
}
Spacer(modifier = Modifier.size(10.dp))
PickerGroup(selectedPickerState = pickerStates[selectedPickerIndex], autoCenter = true) {
PickerGroupItem(
pickerState = pickerStateHour,
selected = selectedPickerIndex == 0,
onSelected = { selectedPickerIndex = 0 },
option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
contentDescription = { "Hours" },
modifier = Modifier.size(80.dp, 100.dp),
)
PickerGroupItem(
pickerState = pickerStateMinute,
selected = selectedPickerIndex == 1,
onSelected = { selectedPickerIndex = 1 },
option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
contentDescription = { "Minutes" },
modifier = Modifier.size(80.dp, 100.dp),
)
PickerGroupItem(
pickerState = pickerStateSeconds,
selected = selectedPickerIndex == 2,
onSelected = { selectedPickerIndex = 2 },
option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
contentDescription = { "Seconds" },
modifier = Modifier.size(80.dp, 100.dp),
)
PickerGroupItem(
pickerState = pickerStateMilliSeconds,
selected = selectedPickerIndex == 3,
onSelected = { selectedPickerIndex = 3 },
option = { optionIndex, _ -> Text(text = "%03d".format(optionIndex)) },
contentDescription = { "Milliseconds" },
modifier = Modifier.size(80.dp, 100.dp),
)
}
}
}
PickerGroupSample
@Composable
fun PickerGroupSample() {
var selectedPickerIndex by remember { mutableIntStateOf(0) }
val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(modifier = Modifier.size(30.dp))
val label = if (selectedPickerIndex == 0) "Hours" else "Minutes"
AnimatedContent(targetState = label) { targetText -> Text(text = targetText) }
Spacer(modifier = Modifier.size(10.dp))
PickerGroup(
selectedPickerState =
if (selectedPickerIndex == 0) pickerStateHour else pickerStateMinute,
autoCenter = false,
) {
PickerGroupItem(
pickerState = pickerStateHour,
selected = selectedPickerIndex == 0,
onSelected = { selectedPickerIndex = 0 },
option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
contentDescription = { "Hours" },
modifier = Modifier.size(80.dp, 100.dp),
)
PickerGroupItem(
pickerState = pickerStateMinute,
selected = selectedPickerIndex == 1,
onSelected = { selectedPickerIndex = 1 },
option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
contentDescription = { "Minutes" },
modifier = Modifier.size(80.dp, 100.dp),
)
}
}
}
Create your own Component Library
Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled