Circular Determinate ProgressBar Kotlin

Circular Determinate ProgressBar Kotlin

ProgressBar in Android is used to show the ongoing progress of a certain task running on the screen. A progressbar is a view that displays the progress that how much an ongoing task/operation has completed. In this tutorial I will tell you how you can design a beautiful Circular Determinate ProgressBar using Kotlin.

ProgressBar is of two types. Indeterminate ProgressBar and Determinate ProgressBar. Indeterminate ProgressBar does not show the time and percentage left in completing a task. Whereas a determinate ProgressBar shows the task completed percentage and remaining percentage OR it could show the time/items left according to its use in the application. So, in this example we will design a Circular Determinate ProgressBar using Kotlin.

 

Circular Determinate ProgressBar In Kotlin:

 

 

Circular Determinate ProgressBar In Kotlin

 

1- Open your Android Studio and create a new Android Studio Project. Name this project “DeterminateProgressBar”. Also, you can name anything of your choice.

2- After the project builds successfully, you will have two files. MainActivity.kt file and activity_main.xml file.

3- Now, Right click on your drawable folder and select New, then select Drawable Resource File. Name this file as “circularprogressbar” or any name of your choice. So, below name select the Root element as “layer-list”.

 

Circular Determinate ProgressBar Kotlin
Circular Determinate ProgressBar Kotlin

 

4- Come to circularprogressbar.xml file. Here we will design our Circular ProgressBar with the help of two ring shapes. The background ring will be transparent. And the outer ring will have a gradient color effect. We will add rotate function onto the outer ring fromDegrees 270 to toDegrees 270. So, this will rotate the current progress in a clockwise direction.

5- So, after adding these two items and shapes with rotate and color effect our final circularprogressbar.xml will be like this:

 

 

 

“activity_main.xml”

 

6- Now, come to your activity_main.xml file. Add a ProgressBar with “200dp” width and height. Set android:progressDrawable=”@drawable/circularprogressbar”. Set all the constraints with respect to parent to display the ProgressBar in the center of the Screen. Give an id to the ProgressBar (progressbar).

 

 

 

7- We need a TextView to display the progress. We will take a TextView with “wrap_content” width and height. Set text=30% and textSize = 20sp. Give an id to the TextView (text_progress).

 

 

 

8- So, to increase and decrease the current progress of the ProgressBar we will use two Buttons. Set the width and height to “wrap_content”. After assigning the ids to both buttons they will look like this.

 

 

 

9- This is the complete and final activity_main.xml file code.

 

 

 

“MainActivity.kt”

 

10- We will create a variable “currentprogress” and set its default value to zero.

 

 

 

11- In onCreate method we will set onClickListener on both buttons to increase and decrease the current progress. The minimum progress value is zero and the maximum progress value is 100. On a single Button Click we can increase or decrease the ProgressBar by 10%.

 

12- To update the current progress we will use a separate method updateProgressResult(). This method will update the current progress bar every time a user clicks a button. The complete MainActivity.kt file will be like this.

 

 

 

So, this is it for this tutorial. We designed a beautiful Circular Determinate ProgressBar with Kotlin. You can add more customization to your ProgressBar. If you want to use different colors then you have to add different start,center and end colors in your gradient feature. But, the default ProgressBar color is colorAccent. So I hope you liked this tutorial. Share this tutorial and share your views in the comments section below. Have Fun 🙂

 

OUTPUT
Circular Determinate ProgressBar Kotlin
Circular Determinate ProgressBar Kotlin

 

Circular Determinate ProgressBar Kotlin
Android Circular Determinate ProgressBar In Kotlin

Circular Determinate ProgressBar Kotlin

 

 People Also Read :

 

 

3 thoughts on “Circular Determinate ProgressBar Kotlin”

  1. Pingback: Horizontal ProgressBar Android Kotlin | Android Studio - My Android

  2. Pingback: Android Kotlin SeekBar Example | Android Studio SeekBar - My Android

  3. Pingback: Kotlin Button OnClickListener | Android Studio Example - My Android

Leave a Comment

Your email address will not be published. Required fields are marked *