Jetpack Compose element
Less than 1 minute
Jetpack Compose element
Spinner
sample code
@Composable
fun SampleSpinner(
list: List<Pair<String, String>>,
preselected: Pair<String, String>,
onSelectionChanged: (selection: Pair<String, String>) -> Unit
) {
var selected by remember { mutableStateOf(preselected) }
var expanded by remember { mutableStateOf(false) } // initial value
Box {
Column {
OutlinedTextField(
value = (selected.second),
onValueChange = { },
label = { Text(text = "My List") },
modifier = Modifier.fillMaxWidth(),
trailingIcon = { Icon(Icons.Outlined.ArrowDropDown, null) },
readOnly = true
)
DropdownMenu(
modifier = Modifier.fillMaxWidth(),
expanded = expanded,
onDismissRequest = { expanded = false },
) {
list.forEach { entry ->
DropdownMenuItem(
modifier = Modifier.fillMaxWidth(),
onClick = {
selected = entry
expanded = false
},
text = {
Text(
text = (entry.second),
modifier = Modifier
.wrapContentWidth()
.align(Alignment.Start)
)
}
)
}
}
}
Spacer(
modifier = Modifier
.matchParentSize()
.background(Color.Transparent)
.padding(10.dp)
.clickable(
onClick = { expanded = !expanded }
)
)
}
}
@Preview(showBackground = true)
@Composable
fun SampleSpinner_Preview() {
MaterialTheme {
val entry1 = Pair("Key1", "Entry1")
val entry2 = Pair("Key2", "Entry2")
val entry3 = Pair("Key3", "Entry3")
SampleSpinner(
listOf(entry1, entry2, entry3),
preselected = entry2,
onSelectionChanged = { selected -> /* do something with selected */ }
)
}
}Lazy list (RecyclerView/ListView)
sample code
@Composable
fun ListAnimatedItems(
items: List<String>,
modifier: Modifier = Modifier
) {
LazyColumn(modifier) {
// Use a unique key per item, so that animations work as expected.
items(items, key = { it }) {
ListItem(
headlineContent = { Text(it) },
modifier = Modifier
.animateItem(
// Optionally add custom animation specs
)
.fillParentMaxWidth()
.padding(horizontal = 8.dp, vertical = 0.dp),
)
}
}
}