CODEWITHSUNDEEP
androidandroid-jetpack-composeextendcard
Slava
Slava

Reputation: 717

Extendable card in jetpack compose

How can implement extendable card which extend over layout underneath not move it. For example compose has card and column underneath. After click on card, extended card must hide column under extended card, not move it to bottom.

Upvotes: -1

Views: 284

Answers (1)

Faruk
Faruk

Reputation: 1501

Create a custom MyDropDown Composable

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyDropdown(list: List<String>) {
    var expanded by remember { mutableStateOf(false) }
    var selectedText by remember { mutableStateOf(list[0]) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        ExposedDropdownMenuBox(
            expanded = expanded,
            onExpandedChange = {
                expanded = !expanded
            }
        ) {
            TextField(
                value = selectedText,
                onValueChange = {},
                readOnly = true,
                //trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
                // if you want icon
                modifier = Modifier.menuAnchor()
            )

            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                list.forEach { item ->
                    DropdownMenuItem(
                        text = { Text(text = item) },
                        onClick = {
                            //selectedText = item
                            // i think you don't want change selected
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}

and use like this

    setContent {
        MyTheme {
            val list = listOf<String>("A", "B", "C")
            Column(
                verticalArrangement = Arrangement.spacedBy(5.dp)
            ) {
                MyDropdown(list)
                MyDropdown(list)
                MyDropdown(list)
                MyDropdown(list)
            }
        }
    }

Upvotes: 1

Related Questions