Dialogs on Samsung devices (One UI) aligned to bottom of screen

Question

I have two functions to show dialogs in my app, one is to show a dialog with a progress bar (using the Dialog component) and the second one is to show a dialog with buttons (using the AlertDialog component). I'm using compose 1.3.2 and androidx.compose.material 1.4.0-alpha03.

Everything is fine, the dialog is located in the center of the screen on all devices except Samsung with One UI.

On Samsungs, dialogs are aligned to the bottom of the screen.

I found such an article and it turned out that this is normal behavior for critical dialogs and dialogs with a choice or confirmation, however, they recommend displaying progress dialogs in the center of the screen.

How can I align my Dialog so that it is centered on all devices?

Here is the code of my progress dialog

@Composable
private fun ProgressDialog(state: ProgressDialogState) {
    Dialog(
        onDismissRequest = state.onCancel ?: {},
        properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .size(80.dp)
                .background(AppTheme.colors.background, shape = AppShapes.medium)
        ) {
            CircularProgressIndicator(color = AppTheme.colors.primary)
        }
    }
}

Answer 1

So the only solution I found - replace Dialog with custom implementation - just dimmed fullscreen box with content.

@Composable
fun ProgressDialog(state: AppState.ProgressDialogState) {
    val show = remember(state) { state.isShowing }

    // Dialog replaced with Box due to bottom position of dialogs on some Samsung devices
    if (show) Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = MaterialTheme.colorScheme.scrim.copy(alpha = .55f))
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null,
                onClick = {
                    // click interceptor
                }
            ),
        contentAlignment = Alignment.Center
    ) {

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .size(80.dp)
                .background(AppTheme.colors.bgPrimary, shape = AppShapes.medium)
        ) {
            CircularProgressIndicator(color = AppTheme.colors.buttonPrimary)
        }
    }
}