Hi! When I have more than one modal thing shown on...

# compose

[Jirka Hutárek]

Hi! When I have more than one modal thing shown on the screen (let's say a M3 modal bottom sheet and a dialog), is it possible to specify which one should be at the top of the other? It seems like only the order of their appearance matters:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

internal class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val coroutineScope = rememberCoroutineScope()
            var sheetVisible by remember { mutableStateOf(false) }
            var dialogVisible by remember { mutableStateOf(false) }

            Column(
                modifier = Modifier
                    .fillMaxSize()
            ) {
                Button(
                    onClick = {
                        coroutineScope.launch {
                            sheetVisible = true
                            delay(500)
                            dialogVisible = true
                        }
                    }
                ) {
                    Text("Sheet -> Dialog")
                }
                Button(
                    onClick = {
                        coroutineScope.launch {
                            dialogVisible = true
                            delay(500)
                            sheetVisible = true
                        }
                    }
                ) {
                    Text("Dialog -> Sheet")
                }
            }

            if (sheetVisible) {
                ModalBottomSheet(
                    onDismissRequest = { sheetVisible = false },
                ) {
                    Box(
                        modifier = Modifier
                            .background(Color.Yellow)
                            .fillMaxWidth()
                            .height(320.dp)
                    )
                }
            }

            if (dialogVisible) {
                Dialog(
                    onDismissRequest = { dialogVisible = false },
                ) {
                    Box(
                        modifier = Modifier
                            .background(Color.Cyan)
                            .size(320.dp, 400.dp)
                    )
                }
            }
        }
    }
}

No matter if I set z-indices on various things, put the modals in boxes, etc., the thing that gets invoked last is the thing that's drawn on top. Is there a way to say have the dialog always on top, no matter if the bottom sheet appears before or after it (except for putting the dialog inside the bottom sheet but that is not my use case)? 🙏