CODEWITHSUNDEEP
kotlinswiftuiandroid-jetpack-composepickersegmentedcontrol
Zonker.in.Geneva
Zonker.in.Geneva

Reputation: 1499

How do I select values from an enum in Kotlin and Jetpack Compose?

I'm in the process of converting my iOS app to Android. I have several enums that are used to filter an array. I have Categories (Womens, Mens, Mixed), Leagues and Divisions.

In SwiftUI, I am using a Picker {}.pickerStyle(SegmentedPickerStyle()). I'm looking for a way to do the same in Jetpack Compose. The keywords I've searched for haven't turned up anything.

So, how do I visually select values from a Kotlin enum in Jetpack Compose?

Categories and Divisions Picker

Upvotes: 0

Views: 2232

Answers (2)

Zonker.in.Geneva
Zonker.in.Geneva

Reputation: 1499

Finally found a complete list of Material Components. It seems what I want is Segmented Buttons - except it's status is "Planned".

I also found Tabs in Material Design. They might do the trick, too.

Upvotes: 1

Andy Jazz
Andy Jazz

Reputation: 58043

Try the following Jetpack Compose "equivalent":

@Composable fun MyExposedDropdownMenuBox() {

    val context = LocalContext.current
    val categories = arrayOf("Women", "Men", "Mixed")
    var expanded by remember { mutableStateOf(false) }
    var selectedText by remember { mutableStateOf(categories[0]) }

    Box(modifier = Modifier.fillMaxWidth().padding(32.dp)) {
        ExposedDropdownMenuBox(
            expanded = expanded,
            onExpandedChange = { expanded = !expanded }
        ) {
            TextField(
                value = selectedText,
                onValueChange = {},
                readOnly = true,
                trailingIcon = { 
                    ExposedDropdownMenuDefaults.TrailingIcon(
                        expanded = expanded
                    )
                },
                modifier = Modifier.menuAnchor()
            )    
            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                categories.forEach { item ->
                    DropdownMenuItem(
                        text = { Text(text = item) },
                        onClick = {
                            selectedText = item
                            expanded = false
                            Toast.makeText(context, 
                                           item, 
                                           Toast.LENGTH_SHORT).show()
                        }
                    )
                }
            }
        }
    }
}

Upvotes: 0

Related Questions