CODEWITHSUNDEEP
androidandroid-jetpack-composeoverlayandroid-dialog
allo86
allo86

Reputation: 1016

Jetpack Compose dialog not showing gray overlay

Not sure if I am missing something obvious, but when showing a Dialog I am not able to get the gray overlay background in the parent screen. With this code for a brand new app:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(modifier = Modifier.fillMaxSize()) {
                        Greeting("Android")
                    }

                    CustomDialog()
                }
            }
        }
    }
}

@Composable
fun CustomDialog() {
    var showDialog by remember { mutableStateOf(true) }
    if (showDialog) {
        Dialog(onDismissRequest = {
            showDialog = !showDialog
        }) {
            Column(modifier = Modifier.fillMaxWidth()
                .background(color = Color.Red)) {
                Text(text = "Hello Dialog!")
                Text(text = "Subtitle!")
            }
        }
    }
}

I get this (it doesn't even look like a Dialog on top of another screen) Dialog

All documentation and examples I found show the modal with the gray overlay in the background. Is there a setting I am missing to show it?

Upvotes: 7

Views: 2799

Answers (1)

Warrick
Warrick

Reputation: 1963

This behavior only occurs when running in an Android Emulator. I won't pretend to know why, but I also wasted a lot of time trying to "add" the background dimming... only to eventually figure out it's not something I'm doing wrong.

Upvotes: 18

Related Questions