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.

score 15 · Answer 1 · answered Mar 25 '23 at 19:27

15

You can make it easily like this:

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

answered Mar 25 '23 at 19:27

Igor Konyukhov

394
4
7

1

This is the best answer so far. Have been looking for a good solution for a long time. Thanks – odifek Mar 30 '23 at 12:45
1

You are my savior. thanks. – Wonsik Sung Jul 12 '23 at 07:55
This also effects on alertdialog in devices with bigger fonts and display size the dialog takes full width which is side effect of this. – Unique Identifier Aug 09 '23 at 09:20
maybe you need to use Modifier.padding() in your dialog layout – Igor Konyukhov Aug 09 '23 at 18:53

Cuong Le Q. · Answer 2 · 2022-11-16T07:24:51.663

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

score 2 · Answer 3 · answered Apr 09 '22 at 04:02

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)

score 1 · Answer 4 · answered Apr 06 '22 at 18:49

1

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!

answered Apr 06 '22 at 18:49

Code Poet

6,222
2
29
50

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. – AndroidDev Apr 06 '22 at 19:55

score 0 · Answer 5 · answered Aug 07 '23 at 08:59

0

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

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

}

answered Aug 07 '23 at 08:59

Andrii Turkovskyi

27,554
16
95
105

score 0 · Answer 6 · answered Aug 29 '23 at 02:21

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
}

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

6 Answers6