androiddrop-down-menuandroid-jetpack-composeandroid-compose-dropdownmenu

Cannot change the background of DropdownMenu


I'm trying to follow this tutorial

But I need more customized UI regarding the dropdown list. I need to make the popup background rounded. But when I added .clip(RoundedCornerShape(20)) into the DropdownMenu's modifier, it still have the white background

Bellow is my test composable code:

@ExperimentalFoundationApi
@ExperimentalCoilApi
@Composable
fun TestScreen(
   navigator: AppNavigator,
) {
    var expanded by remember { mutableStateOf(false) }
    val items = listOf("A", "B", "C", "D", "E", "F")
    val disabledValue = "B"
    var selectedIndex by remember { mutableStateOf(0) }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Cyan)
            .padding(top = 70.dp)
            .wrapContentSize(Alignment.TopStart)
    ) {
        Text(
            items[selectedIndex],
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = { expanded = true })
                .background(
                    Color.Gray
                )
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(20))
                .background(
                    Color.Red
                )
        ) {
            items.forEachIndexed { index, s ->
                DropdownMenuItem(onClick = {
                    selectedIndex = index
                    expanded = false
                }) {
                    Text(text = s)
                }
            }
        }
    }
}

I can still clip, draw border, set background color. But the white background is just still there.

I tried to look into the source code of DropDownMenu but I can't seems to find the place for it. I'm new to Jetpack Compose, so maybe I missed something.


Solution

  • DropdownMenu looks like this because of default Card parameters.

    You can change MaterialTheme related parameters for the whole app or override them for a single view like this:

    MaterialTheme(
        colors = MaterialTheme.colors.copy(surface = Color.Red),
        shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(20))
    ) {
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
        ) {
            // ...
        }
    }