Jetpack Compose Dialog - Is there a way to change the background transparency?

Question

When we show a Dialog/AlertDialog in Jetpack Compose the background seems to be a bit dark, is there a way to adjust the background alpha or make it transparent? For eg: The White background in this image is turned into Dark grey when the dialog is shown.

Philosophy

Answer 1

You can make it easily like this:

Dialog(onDismissRequest = {}) {
    (LocalView.current.parent as DialogWindowProvider)?.window?.setDimAmount(0f)
    // dialog content here...
   }

Octans

This is the best answer so far. Have been looking for a good solution for a long time. Thanks – Seabury

You are my savior. thanks. – Henna

This also effects on alertdialog in devices with bigger fonts and display size the dialog takes full width which is side effect of this. – Augustaaugustan

maybe you need to use Modifier.padding() in your dialog layout – Octans

but status bar icon is still light. as background is not dimed, status bar icons are unvisiable. android 13. – Rorke

To solve the issue with invisible status bar icons: (LocalView.current.parent as DialogWindowProvider).window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND) – Euphrates

How did you know this? This isn't document anywhere though? Did you play around with the source code and dig deep? – Adolescent

How to change background color of Dialog? – Smriti

Answer 2

I was try with Dialog and no way to clear flag WindowManager.LayoutParams.FLAG_DIM_BEHIND.

You can try to use Popup to replace Dialog, everything work good for me.

Popup(
        onDismissRequest = {},
        properties = PopupProperties(
            focusable = true,
            dismissOnBackPress = false,
            dismissOnClickOutside = false,
            excludeFromSystemGesture = true,
        )
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Transparent)
        ) {
            // Your content code is here
        }
    }

Barbera

Answer 3

You could possibly use a full screen dialog and then insert a card into it with the text that you want. For instance:

AlertDialog(
            modifier = Modifier.fillMaxSize(),
            backgroundColor = Color.White.copy(alpha = 0.2f),
            properties = DialogProperties(usePlatformDefaultWidth = false),

You can add your Card Composable in the text part:

text = {
        Card(Modifier.size(200.dp)) {
        Text(text = "test")
     }
}

Hope this helps!

Mikol

Thanks but I don't want to create a new screen. I want to change the transparency of the current screen irrespective of its contents when a dialog is shown on top of it. – Philosophy

Answer 4

This behavior is controlled by android.view.Window.

It lies deep under Dialog and the only way I can think of to change it is to copy all the source code.

Then, in this line of the source code, you can insert the following:

window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)

Grave

Answer 5

You might be able to achieve this by changing the window attributes. Here's how you can do it in a Dialog:

Dialog(
    onDismissRequest = {
        
    }
) {
    val curView = LocalView.current
    /* Change the transparency of the dialog window */
    LaunchedEffect(curView) {
        tailrec fun Context.findWindow(): Window? = when (this) {
            is Activity -> window
            is ContextWrapper -> baseContext.findWindow()
            else -> null
        }

        fun View.findWindow(): Window? =
            (parent as? DialogWindowProvider)?.window ?: context.findWindow()

        try {
            val window = curView.findWindow() ?: return@LaunchedEffect
            val lp = window.attributes
            lp.dimAmount = dimAmount // Modify the dim amount value
            window.attributes = lp
        } catch (e: Throwable) {
            e.printStackTrace()
        }
    }
    // content
}

Dino

Answer 6

Set decorFitsSystemWindows to false seems quite workable if you want to set transparent background.

Dialog(
    onDismissRequest = { /*TODO*/ },
    properties = DialogProperties(decorFitsSystemWindows = false)
) {

}

Burgas

Answer 7

I'm a bit late to answer, but anyway... We can achieve this with styles only. The compose app continues to make use of our existing theme.xml. Let's take Firefly's main theme as an example:

 <style name="Theme.DialogFullScreen" parent="@style/ThemeOverlay.MaterialComponents.Dialog.Alert">
            <item name="android:backgroundDimEnabled">false</item>
            <item name="android:windowSoftInputMode">adjustResize</item>
            <item name="android:statusBarColor">@color/white</item>
            <item name="android:windowLightStatusBar">true</item>
            <item name="android:windowLightNavigationBar" tools:ignore="NewApi">true</item>
  </style>

Then, add it to your main theme.

<style name="Theme.FireflyCompose" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/white</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:dialogTheme">@style/Theme.DialogFullScreen</item>
    </style>
    

Phaeton

Answer 8

The only way I found to change the dialog's background in Jetpack Compose is to change the theme's surface color. Look for this line in the color file of the theme:

val surface = Color(0xFFAAFFD0)

Of course this will change the color wherever the surface setting is used.

Biotin

Answer 9

Just use the below properties for Material 3 design.

containerColor = colorResource(id = R.color.colorOnSurface)

It works for me.

Martie