Progress Dialog - Android Studio - Compose

Progress Dialog in Android Studio using Compose

What are Progress Bars?

Progress bars are used to indicate that a task is running in the background, such as downloading files or creating a user account. They help improve user experience by providing visual feedback during long operations. 

In Android, ProgressDialog is a dialog-based component used to display loading or progress status while a task is being processed. This post explains how to implement a simple Progress Dialog in Android Studio using Jetpack Compose.

>> Check For Java
>> Check For Kotlin
>> Check For Compose

Code:

MainActivity.kt

package com.technifysoft.myapplication

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.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
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.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme

class MainActivityCompose : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainUI()
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MainUI() {
        val showProgress = remember { mutableStateOf(false) }

        Box() {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(20.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Progress Dialog",
                    fontSize = 20.sp
                )

                Button(
                    modifier = Modifier
                        .padding(top = 100.dp)
                        .width(200.dp),
                    onClick = {
                        showProgress.value = true
                    }
                ) {
                    Text(text = "Show Progress")
                }

                Button(
                    modifier = Modifier.width(200.dp),
                    onClick = {
                        showProgress.value = false
                    }
                ) {
                    Text(text = "Hide Progress")
                }
            }

            if (showProgress.value){
                ProgressDialog("Please Wait", "Creating Account...", showProgress)
            }
        }


    }

    @Composable
    fun ProgressDialog(
        title: String,
        message: String,
        showProgress: MutableState<Boolean>
    ) {
        Dialog(
            onDismissRequest = {
                //To allow dismiss when click outside or go back button
                showProgress.value = false
            },
            properties = DialogProperties(
                dismissOnBackPress = true,
                dismissOnClickOutside = true
            )
        ) {

            Box(
                modifier = Modifier
                    .background(Color.White, RoundedCornerShape(12.dp))
                    .padding(24.dp)
            ) {

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {

                    CircularProgressIndicator()

                    Spacer(modifier = Modifier.height(16.dp))

                    Text(
                        text = title,
                        fontSize = 18.sp,
                        fontWeight = FontWeight.Bold
                    )

                    Spacer(modifier = Modifier.height(8.dp))

                    Text(
                        text = message,
                        fontSize = 14.sp,
                        color = Color.Gray
                    )
                }
            }
        }
    }

    /**
     * GreetingPreview is a composable function for previewing the MainUI in Android Studio.
     * It is annotated with @Preview to enable live preview.
     *
     */
    @Preview(showBackground = true)
    @Composable
    private fun GreetingPreview() {
        MyApplicationTheme {
            MainUI()
        }
    }

}

Screenshots: