Forms with Kotlin : How can I add a drop down menu in a form in Kotlin

Question

I'm starting with Kotlin and I was wondering how can I make a form in Kotlin with a drop-down menu. I made this but isn't look good.

Code:

                       var billingPeriodExpanded by remember { mutableStateOf(false) }

                    var selectedIndex by remember { mutableStateOf(0) }


                    OutlinedTextField(
                        value = billingPeriodItems[selectedIndex],
                        onValueChange = { selectedIndex = billingPeriodItems.indexOf(it) },
                        label = {
                            Column(modifier = Modifier.fillMaxSize()) {
                                ComposeMenu(

                                    menuItems = billingPeriodItems,
                                    menuExpandedState = billingPeriodExpanded,
                                    seletedIndex = selectedIndex,
                                    updateMenuExpandStatus = {
                                        billingPeriodExpanded = true
                                    },
                                    onDismissMenuView = {
                                        billingPeriodExpanded = false
                                    },
                                    onMenuItemclick = { index ->
                                        selectedIndex = index
                                        billingPeriodExpanded = false
                                    }
                                )
                            }
                        },

                        singleLine = true,
                        modifier = Modifier.fillMaxWidth(0.8f)
                    )

and it looks in this way:

here you can see how the drop-down menu is over the field and not inside of it

Do you know how can I fix It?

Answer 1

No need to reinvent the wheel. There is already a component in Compose that does this:

Stackoverflow - Exposed Dropdown Menu for Compose

See the latest code sample for this at:

ExposedDropdownMenuTest.kt

Just search for the function:

ExposedDropdownMenuForTest