Compose Desktop AlertDialog rounded corners

Question

In a compose desktop application I'm displaying an AlertDialog with rounded corners shape but there still appears a white rectangle at the corners.

Here is my code:

AlertDialog(
    modifier = Modifier
        .size(280.dp, 260.dp)
        .shadow(elevation = 20.dp),
    onDismissRequest = {},
    buttons = {
        Button(
            modifier = Modifier.padding(start = 100.dp, top = 0.dp),
            onClick = { onClose() }
        ) {
            Text(
                text = "OK",
                textAlign = TextAlign.Center
            )
        }
    },
    title = {
        Text(
            "A Title"
        )
    },
    text = {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Some Text")
        }
    },
    shape = RoundedCornerShape(24.dp),
    backgroundColor = Color.Red
)

How can I get rid of the background white corners that are visible behind the dialog.

score 1 · Answer 1 · edited Sep 18 '22 at 21:44

@Composable
fun CustomAlertDialog(showingDialog: Boolean = false, onClickButton: () -> Unit) {

    val color = if (isSystemInDarkTheme()) WhiteColor else Black90

    val openDialog = remember { mutableStateOf(true) }


    if (openDialog.value) {
        AlertDialog(
            modifier = Modifier.clip(RoundedCornerShape(12.sdp)), // corner rounded
            onDismissRequest = {
                openDialog.value = false
            },
            title = {
                Text(text = "Title")
            },
            text = {
                Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center
                ) {
                    Text(stringResource(R.string.send_password_email), color = color)
                }
            },
            buttons = {
                Row(
                    modifier = Modifier.padding(all = 8.sdp),
                    horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { openDialog.value = false }, text = "Ok", color = ColorMain, textAlign = TextAlign.Center
                    )
                }
            }
        )
    }

}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Sep 18 '22 at 21:44

score 0 · Answer 2 · answered Dec 09 '22 at 18:33

I was having an issue with .clip() not working because of the fact that Order of modifiers matters, the .clip() effect was being overwritten by my .background() modifier.

This doesn't work:

modifier = Modifier
    .background(MyTheme.colors.background)   // overwrites .clip()
    .clip(RoundedCornerShape(28.dp)),        // .clip() evaluated first

This does work:

modifier = Modifier
    .clip(RoundedCornerShape(28.dp))         // then we can safely .clip()
    .background(MyTheme.colors.background),  // .background() evaluated first

Here is what the AlertDialog code looks like:

AlertDialog(
    modifier = Modifier
        .clip(RoundedCornerShape(28.dp))
        .background(MyTheme.colors.background),
    onDismissRequest = { /* On Dismiss */ },
    text = { /* Text */ },
    buttons = { /* Buttons */ },
    title = { /* Title * / },
)

Just remember that the order of the modifiers is of significant importance.

Compose Desktop AlertDialog rounded corners

2 Answers2