Creates a customizable, searchable dropdown menu interface component, enhancing user interaction by allowing selection from a list of options with dynamic search functionality.
:rocket: A Jetpack Compose Multiplatform Library to create a dropdown menu that is searchable.
Forked from Searchable Dropdown Compose
I found the original library and thought it was pretty cool, I wanted to use it on iOS so decided to migrate it to Compose Multiplatform.
If you're using a version catalog then add the following to your libs.versions.toml file:
[versions]
#...
dropdown = "1.1.0"
[libraries]
#...
searchable-dropdown = { module = "io.github.user154lt:searchable-dropdown", version.ref = "dropdown" }
Then add the following to your module level build.gradle.kts dependencies block
dependencies {
implementation(libs.searchable.dropdown)
}
Alternatively you can add the following to your module level build.gradle.kts dependencies block
dependencies {
implementation("io.github.user154lt:searchable-dropdown:1.1.0")
}
LargeSearchableDropdownMenu(
// List of options to display in the dropdown menu
options = listOf(, ),
selectedOption = ,
onItemSelected = { selected ->
println()
},
placeholder = ,
title = ,
drawItem = { item, _, _, onClick ->
DropdownMenuItem(onClick = onClick) {
Text(item.toString())
}
}
)
If your project uses Searchable-Dropdown-Menu-Jetpack-Compose, please let me know by creating a new issue! 😊
The library was majorly created out of necessity at work by my colleagues and I, since they isn't an out of the box solution in Jetpack compose to have a searchable dropdown menu.
Support it by joining stargazers for this repository. :star:
Also follow me for my next creations! 🤩
Copyright 2022 Breens-Mbaka
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
val sports = mutableListOf("Basketball", "Rugby", "Football", "MMA", "Motorsport", "Snooker", "Tennis")
SearchableExpandedDropDownMenu(
listOfItems = sports // provide the list of items of any type you want to populated in the dropdown,
modifier = Modifier.fillMaxWidth(),
onDropDownItemSelected = { item -> // Returns the item selected in the dropdown
Toast.makeText(applicationContext, item, Toast.LENGTH_SHORT).show()
},
enable = // controls the enabled state of the OutlinedTextField
placeholder = "Select option" // Add your preferred placeholder name,
openedIcon = // Add your preffered icon when the dropdown is opened,
closedIcon = // Add your preffered icon when the dropdown is closed,
parentTextFieldCornerRadius = // By default the corner radius is 12.dp but you can customize it,
colors = // Customize the colors of the input text, background and content used in a text field in different states
dropdownItem = { name -> // Provide a Composable that will be used to populate the dropdown and that takes a type i.e String,Int or even a custom type
Text(name)
},
selectedDisplayText = {} // Optional: Returns the selected item and allow mapping it to a custom display text. If no mapping provided, item.toString() will be used by default
)
Surfaced from shared tags and platforms — no rankings paid for.