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, 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" // ... }
Code language: Swift (swift)

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>
Code language: HTML, XML (xml)

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() } } } }
Code language: Kotlin (kotlin)

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>
Code language: HTML, XML (xml)

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) // ... } }
Code language: Kotlin (kotlin)

… 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) // ... } } }
Code language: Kotlin (kotlin)

… 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) } } }
Code language: Kotlin (kotlin)
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