Progress Dialog Spinner in Jetpack

In Jetpack Compose, there is no direct equivalent to the traditional “progress dialog” from the View-based Android framework. Instead, you can use a Dialog or Box with a CircularProgressIndicator to create a custom progress dialog spinner.

Example: Progress Dialog with Spinner

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog

@Composable
fun ProgressDialogExample() {
    val showDialog = remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { showDialog.value = true }) {
            Text("Show Progress Dialog")
        }

        if (showDialog.value) {
            ProgressDialog(
                message = "Loading, please wait...",
                onDismiss = { showDialog.value = false }
            )
        }
    }
}

@Composable
fun ProgressDialog(message: String, onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Box(
            modifier = Modifier
                .size(200.dp)
                .background(Color.White, shape = RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                CircularProgressIndicator()
                Spacer(modifier = Modifier.height(16.dp))
                Text(text = message, color = Color.Black)
            }
        }
    }
}

Explanation

1. Dialog:

• Used as a container for the custom progress dialog.

1. CircularProgressIndicator:

• Displays a spinning loader.

1. Box:

• Creates a container with rounded corners and a custom size for the dialog.

1. Message:

• Display a message below the spinner to inform the user about the loading process.

Key Features

1. Customizable Layout:

• Easily adjust the size, color, and layout of the dialog.

1. Dismiss Behavior:

• The onDismissRequest parameter ensures the dialog can be dismissed by tapping outside or using state management.

1. Reusability:

• ProgressDialog can be reused across the app with different messages.

Optional Enhancements

1. Transparent Background:
   Add a semi-transparent backdrop for a more focused user experience.

   Box(
       modifier = Modifier
           .fillMaxSize()
           .background(Color.Black.copy(alpha = 0.5f))
           .wrapContentSize(Alignment.Center)
   )

2. Indeterminate Progress Bar:
   Use CircularProgressIndicator with indeterminate progress for unknown durations.

This implementation is modern, flexible, and fits seamlessly into Jetpack Compose’s declarative design.