ProgressDialog in jetpack compose

Question

I want to show Indeterminate progress dialog when user performs some action like signing up. The old way it was possible using ProgressDialog.

For compose, I found this How can I render plain android ProgressBar with Compose? But this is not exactly what I'm looking for as it's just a view. It does not cover the screen like dialog does.

With CircularProgressIndicator I'm able to achieve this:

As you can see it's shown below the views.

I want to create something like this:

It should have:

Dim background
draw over other views
Non cancellable

How can I achieve this in Jetpack compose?

user_2016562 · Answer

You can use the Dialog composable:

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    Dialog(
        onDismissRequest = { showDialog = false },
        DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)
    ) {
        Box(
            contentAlignment= Center,
             modifier = Modifier
                .size(100.dp)
                .background(White, shape = RoundedCornerShape(8.dp))
        ) {
            CircularProgressIndicator()
        }
    }
}

user_7258332 · Answer

Dialog with loading text using Dialog component of compose.material.

@Composable
fun DummyProgress() {
    var dialogState by remember { mutableStateOf(false) }
    Button(onClick = { dialogState = !dialogState }) {
        Text(text = "Show Progress")
    }
    if (dialogState) {
        Dialog(onDismissRequest = { dialogState = false },
        DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)) {
            Box(
                contentAlignment= Alignment.Center,
                modifier = Modifier
                    .size(100.dp)
                    .background(White, shape = RoundedCornerShape(12.dp))
            ) {
                Column {
                    CircularProgressIndicator(modifier = Modifier.padding(6.dp, 0.dp, 0.dp, 0.dp))
                    Text(text = "Loading...", Modifier.padding(0.dp, 8.dp, 0.dp, 0.dp))
                }
            }
        }
    }
}

ProgressDialog in jetpack compose

2 Answers