How to create a Custom Progress Dialog in Android using Kotlin
- August 17, 2019
- John Codeos
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.
- Right Click on the value folder and go to New>Android XML Resource File
- Set the following:
File name: styles
Source set: main
Available qualifiers: Version; press the >> button and write 21 in the Platform API level field
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!
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?
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:
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.
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!