Animating Dialog components on top of each other in Jetpack Compose

Question

I currently have a Dialog box that animates its contents. It's displayed as follows, where AnimatedScaleInTransition is an AnimatedVisibility Composable that expands/contracts and uses content() as its input. It works fine, with Dialog launching its faded background and then the animation sliding in.

 Dialog(onDismissRequest = {
    coroutineScope.launch {
        startDismissWithExitAnimation(animateTrigger, onDismissRequest)
    }
}
) {
    Box(
        modifier = modifier
    ) {
        AnimatedScaleInTransition(time = 200, visible = animateTrigger.value) {
            content()
        }
    }
}

What I'm trying to do is animate another Dialog box over the first one. When I do this, instead of the normal faded grey Dialog background, I get a white one that just pops its ugly head in, followed by the animation. It also does this with custom Dialogs I've tried, ignoring other enclosing Composables. What am I missing?

Answer 1

Try to approach transition animation between multiple items with AnimatedVisibility. I hope this can help you

AnimatedVisibility(
            visible = conditionToShowDialog1,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            Dialog1Body()
        }
        AnimatedVisibility(
            visible = conditionToShowDialog2,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            Dialog2Body()
        }

if any of defined conditions that changes, the followed composable will add to composition or removed of it with defined enter and exit animation.