i have the following snippet for showing a simple dialog with some text in Jetpack Compose on Android:

    Dialog(onDismissRequest = { showDialog.value = false }) {
        Text(
            text = "Hello",
            color = Color.Black,
            fontSize = 24.sp,
            modifier = Modifier
                .background(
                    color = Color.Green,
                    shape = RoundedCornerShape(size = 16.dp)
                )
                .padding(8.dp)
        )
    }

which is producing the following output:

Now the tricky part starts: As the charming green rounded shape and the black text is defined, the white background at the edges is not. So where is this white background coming from?

The whole composable screen itself is wrapped into a custom theme at some other point. I already replaced every theme color to a different one to check if there is a change in the dialog's background.

I also tried wrapping the dialog itself in a second theme to override all other colors, but also without success.

Note: The white background is also there when i define a raw text composable without any styling, so it seems to be some kind of standard background of the dialog.

The goal is to have the white background color removed or replaced by a transparent color to only have the rounded shape on the dimmed background.

CodePudding user response：

Try this:

Dialog(
    onDismissRequest = {

    }
) {
    Column(modifier = Modifier.background(color = Color.Transparent)) {
        Text(
            text = "Hello",
            color = Color.Black,
            fontSize = 24.sp,
            modifier = Modifier
                .background(
                    color = Color.Green,
                    shape = RoundedCornerShape(size = 16.dp)
                )
                .padding(8.dp)
        )
    }
}

CodePudding user response：

Thanks to everyone providing useful input, in the end the information that my code is working fine in different project setups made me think in a different direction.

So i tried to move my code some layers up and out of the theme definition. No other result.

But then it came to my mind that i have a mixed project with Compose and good old view implementations and therefore also some xml styles.

Digging a little bit deeper into the compose androidx.compose.ui.window.Dialog one can see that there is an invocation of R.style.DialogWindowTheme in the DialogWrapper. I'm not 100% sure, but i assume that my own xml definitions are overriding some properties of this style and affect the appearance of the compose dialog.

So if you also have similar troubles like i had check the following:

• Do you use xml styles and compose in the same project?

• Did you create a style for dialogs and override dialogTheme in your theme?

  <item name="android:dialogTheme">@style/AppTheme.SomeDialogStyles</item>

• Then please check if you set a custom background color

  <item name="android:background">@color/some_color</item>

The solution for my issue was to remove the android:background attribute. Now i'm smoketesting all existing dialogs if this has some negative impact, but my issue with the white background in the compose dialog is solved!