How to create a Custom Progress Dialog in Android using Kotlin

How to create a Custom Progress Dialog in Android using Kotlin

In this tutorial, I’m going to show you how to make a Custom Progress Dialog for your Android app.

A Progress Dialog is a dialog with a progress indicator and text message.

Progress Dialog is useful while you’re doing some task on your app that needs time to complete, like getting data from a server, because you don’t want to leave your users staring at their screens without letting them know that something is happening in the background.

Let’s get started!

In this example, we’re going to use CardView to give our Progress Dialog nice rounded corners. If you don’t want this, just skip this step and use RelativeLayout instead.

Add the CardView dependency in the app-level of build.gradle:

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Making the Custom Progress Dialog Layout

Go to res > layout and create the Custom Progress Dialog layout (progress_dialog_view.xml):

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cp_bg_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
            android:id="@+id/cp_cardview"
            android:layout_width="150dp"
            android:layout_height="150dp"
            app:cardBackgroundColor="#00000000"
            app:cardCornerRadius="16dp"
            app:cardElevation="0dp"
            app:cardMaxElevation="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">


        <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cp_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center">

            <ProgressBar
                    android:id="@+id/cp_pbar"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="8dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            <TextView
                    android:id="@+id/cp_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="15dp"
                    android:text=""
                    android:textColor="@android:color/white"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.cardview.widget.CardView>


</androidx.constraintlayout.widget.ConstraintLayout>

Creating the Custom Progress Dialog

Now, create the Kotlin class, named CustomProgressDialog.kt, and paste inside:

class CustomProgressDialog {

    lateinit var dialog: CustomDialog

    fun show(context: Context): Dialog {
        return show(context, null)
    }

    fun show(context: Context, title: CharSequence?): Dialog {
        val inflater = (context as Activity).layoutInflater
        val view = inflater.inflate(R.layout.progress_dialog_view, null)
        if (title != null) {
            view.cp_title.text = title
        }

        // Card Color
        view.cp_cardview.setCardBackgroundColor(Color.parseColor("#70000000"))

        // Progress Bar Color
        setColorFilter(view.cp_pbar.indeterminateDrawable, ResourcesCompat.getColor(context.resources, R.color.colorPrimary, null))

        // Text Color
        view.cp_title.setTextColor(Color.WHITE)

        dialog = CustomDialog(context)
        dialog.setContentView(view)
        dialog.show()
        return dialog
    }

    private fun setColorFilter(drawable: Drawable, color: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            drawable.colorFilter = BlendModeColorFilter(color, BlendMode.SRC_ATOP)
        } else {
            @Suppress("DEPRECATION")
            drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)
        }
    }

    class CustomDialog(context: Context) : Dialog(context, R.style.CustomDialogTheme) {
        init {
            // Set Semi-Transparent Color for Dialog Background
            window?.decorView?.rootView?.setBackgroundResource(R.color.dialogBackground)
            window?.decorView?.setOnApplyWindowInsetsListener { _, insets ->
                insets.consumeSystemWindowInsets()
            }
        }
    }
}

Now, go to res > values > styles.xml to set the theme for the Dialog:

<resources>

   <!-- Other Themes -->

    <style name="CustomDialogTheme">
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

</resources>

Using the Custom Progress Dialog

To use it, just declare the class CustomProgressDialog at the beginning of your Activity:

class MainActivity : AppCompatActivity() {

    private val progressDialog = CustomProgressDialog()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    
        // ...    
    
    }
}

… and show the Dialog with a title or not…

class MainActivity : AppCompatActivity() {

    private val progressDialog = CustomProgressDialog()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        start_btn.setOnClickListener {
            // Show progress dialog with Title
            progressDialog.show(this,"Please Wait...")

            // Show progress dialog without Title
            progressDialog.show(this)

            // ...
        }
    }
}

… and dismiss it using:

class MainActivity : AppCompatActivity() {

    private val progressDialog = CustomProgressDialog()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        start_btn.setOnClickListener {
            
            // ...

            Handler(Looper.getMainLooper()).postDelayed({
                // Dismiss progress bar after 4 seconds
                progressDialog.dialog.dismiss()
            }, 4000)
        }
    }
}
You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
13 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mohammed

Hi and thanks for the tutorial, please can you share the java implementation for it

MOHAMMED

Thanks again

Luis

Hi John, really liked your site. Great choose of colors.

I was searching about a progress dialog which could receive updates about what is being done and got here.

Do you think it is very complicated to achieve this?

Thanks

Luis

Thank you for your reply.

It’s something like that, but instead of the percentage, my desire is to change the text. Just like in some games or systems, where they show some funny phrases or tips.

I’ve been searching since i send you the message, I found things related to using runnables and executing it on UiThread. But i couldn’t put to the test.

Luis

You’re welcome, nice to know I’m helping this site to grow.

Al’right, I’m looking foward to seeing your next tutorial.

Thank you for your time,
Cya!

vikash 500 sharma

That’s awesome out of the box tutorial.

Bajio

This is not working, i just wasted my time.

Unresolved reference: progress_dialog_view at val view = inflater.inflate(R.layout.progress_dialog_view, null)

and the fille exists

Bajio

Ok, Thanks

hitesh suhagiya

Already done Invalidate and Restart but still error says: Unresolved reference