androidandroid-jetpack-composeextendcard

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.


Solution

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