# PickerGroup

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerGroup.composable#PickerGroup(androidx.compose.ui.Modifier,androidx.wear.compose.material3.PickerState,kotlin.Boolean,kotlin.Boolean,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, selectedPickerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerState?, autoCenter: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, propagateMinConstraints: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerGroupScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A group of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`s to build components where multiple pickers are required to be combined together. |

## Functions

### PickerGroup

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/PickerGroup.kt+function:PickerGroup) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun PickerGroup(
    modifier: Modifier = Modifier,
    selectedPickerState: PickerState? = null,
    autoCenter: Boolean = true,
    propagateMinConstraints: Boolean = false,
    content: @Composable PickerGroupScope.() -> Unit
): Unit
```

A group of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`s to build components where multiple pickers are required to be combined together. At most one `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` can be selected at a time. When touch exploration services are enabled, the focus moves to the picker which is clicked.

It is recommended to ensure that a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` in non read only mode should have user scroll enabled when touch exploration services are running.

Example of a sample picker group with an hour and minute picker (24 hour format):

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.PickerGroup
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

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),
        )
    }
}
```

![PickerGroupSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_PickerGroupSample_CompositeImage.png)

Example of an auto centering picker group where the total width exceeds screen's width:

```kotlin
import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.PickerGroup
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

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),
        )
    }
}
```

![AutoCenteringPickerGroup Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_AutoCenteringPickerGroup_CompositeImage.png)

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerGroup.composable#PickerGroup(androidx.compose.ui.Modifier,androidx.wear.compose.material3.PickerState,kotlin.Boolean,kotlin.Boolean,kotlin.Function1)`. |
| `selectedPickerState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerState? = null` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerState` of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` that is selected. Null value means that no `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` is selected. |
| `autoCenter: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Indicates whether the selected `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)` 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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the incoming min constraints should be passed to content. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerGroupScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/PickerGroup.composable#PickerGroup(androidx.compose.ui.Modifier,androidx.wear.compose.material3.PickerState,kotlin.Boolean,kotlin.Boolean,kotlin.Function1)` as a container of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Picker.composable#Picker(androidx.wear.compose.material3.PickerState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Float,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,kotlin.Function2)`s. |