How to create a Custom Progress Dialog in Android using Kotlin

How to create a Custom Progress Dialog in Android using Kotlin

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

This is useful to have while you’re doing some task on your app that needs time to complete, like sending or retrieving 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.

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

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 your build.gradle file, like this:

Adding a Custom Progress Bar to our app

First, let’s create our Custom Progress Bar layout (progress_bar.xml):

Next, let’s create the Kotlin class, using the following code:

If you run the project at this point, you will get an error on line 21. That’s because our Custom Progress Dialog uses a theme that makes it transparent over the current screen.

The theme needs to be in the style.xml and styles.xml (v21) files.

If you don’t have the second file, which is for devices with Android 5.0 (API 21), you can add it by following the steps below.

  1. Right Click on the value folder and go to New>Android XML Resource File
  2. Set the following:
    File name: styles
    Source set: main
    Available qualifiers: Version; press the >> button and write 21 in the Platform API level field
    Press OK
Creating the styles.xml (v21) file

After that, paste the following code into both files (styles.xml and styles.xml (v21)):

If you want the status bar’s icons to be black, just change the item android:windowLightStatusBar to true.

In this example, we have a Button to show the Custom Progress Bar, and automatically dismiss it after four seconds, just to show you how it works.

Let’s create the layout for our MainActivity… (activity_main.xml):

…and paste the following code into our MainActivity.kt file:

Here, we show our Custom Progress Bar with the text, “Please Wait”. If you want to have just the progress indicator, without any text, you can change line 11 with the following code:

Now, let’s run it!!

Trying to solve problems

Oops! Our Custom Progress Dialog’s transparent black background doesn’t appear over our status bar in devices with Android 5.0 and above. Let’s fix this!

The Custom Progress Dialog’s transparent black background is not over the status bar

Let’s make the status bar translucent and set it to true, and see if it works. To do this, replace the code in our style.xml (v21) file with this:

Well, it seems to work, but… don’t you think it looks darker than we expected? ?‍♂️

Using android:windowTranslucentStatus makes the status bar darker

The trick

I thoroughly searched the internet, trying to find out how to make the status bar’s color look the way I expected, but I didn’t find any answers.

So, I figured it out by myself.

Let’s do this!!

Take the HEX Color Code you have for your status bar and use it as a replacement for your content background color, or for whatever color over which your Custom Progress Bar appears. In our example:

Before we replace the background color with our status bar color
After we replace the background color with our status bar color

Now, press the button to run our Custom Progress Bar. While it’s running, take a screenshot, like this:

Let’s now go to this website, upload the screenshot, and choose the area from which we want to get the HEX Color Code.

Select the area that has the HEX Color Code you want

Now, let’s go back to our style.xml (v21) file, add to our theme an item with the name "android:statusBarColor", and paste our HEX Color Code, like this:

Let’s run it, and…boom!!

You can find the final project here

If you have any questions, feel free to DM me on Twitter @johncodeos, or leave a comment below!

Leave a Reply

avatar
  Subscribe  
Notify of

Stay Connected

Newsletter

Subcribe for weekly emails! Get my posts of the week right in your inbox!