Extendable card in jetpack compose

Question

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.

Answer 1

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)
            }
        }
    }