IssueTracker

Jetpack Compose version: 1.8.0-beta2

Jetpack Compose component used: Dialog

Android Studio Build: 2024.3.2 Canary 6

Kotlin version: 2.1.10

From Compose 1.8 alphas and betas, setting decorFitsSystemWindows to false disables all Dialog entry/exit animations. This is a behaviour change from Compose 1.7 and does not appear to be mentioned in any release notes as an intended change as far as I can see.

I imagine this is caused by the fix to allow dialog content to properly draw behind system UI. That change is very much desirable, but it would be good for Compose to either (a) restore the "standard" entry/exit animations, or (b) if this isn't possible/is undesirable due to the drawing area changes, provide some simple code migration path or sample for us to restore this animation behaviour ourselves.

See attached videos.

Steps to Reproduce or Code Sample to Reproduce:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TestdialoganimationsTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    var showDialog by rememberSaveable { mutableStateOf(false) }

                    Column(Modifier
                        .padding(innerPadding)
                        .padding(16.dp)) {
                        Button(onClick = {
                            showDialog = true
                        }) {
                            Text("Open dialog")
                        }
                    }

                    if (showDialog) {
                        DialogExample(onDismissRequest = {
                            showDialog = false
                        })
                    }
                }
            }
        }
    }
}

@Composable
fun DialogExample(onDismissRequest: () -> Unit) {
    Dialog(
        onDismissRequest = onDismissRequest,
        DialogProperties(decorFitsSystemWindows = true, usePlatformDefaultWidth = false)
    ) {
        Scaffold(containerColor = MaterialTheme.colorScheme.surfaceContainer) { innerPadding ->
            Column(Modifier
                .padding(innerPadding)
                .padding(16.dp)) {
                Text("This is a dialog")
            }
        }
    }
}