androidandroid-jetpack-composeandroid-dialogandroid-compose-dialog

ProgressDialog in jetpack compose


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:

compose progressbar

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

I want to create something like this:

expected dialog

It should have:

  1. Dim background
  2. draw over other views
  3. Non cancellable

How can I achieve this in Jetpack compose?


Solution

  • 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()
            }
        }
    }
    

    enter image description here