How to create a Circular Determinate Progress Bar with Kotlin for your Android Project

If you are starting a new project, create a ‘New Project’ and select ‘Empty Activity’.

Android Studio 3.6.3 — Project Templates

For the “Name”, enter anything you would like to call this project. In this example project, I will call the name as “Circular ProgressBar”.
Package name should contain something unique to you. Usually this is Reverse domain name notation. If you don’t have a domain name, you can type anything you would like.
You should set the Minimum SDK to API 23 but you can set it to anything you would like to support for your application.
The language should be set to Kotlin.

Once your project loads, you will want to launch your activity_main.xml file and remove the “Hello World!” TextView from the layout. After this has been removed, you will need to click and drag a ProgressBar (Horizontal).
In the attribute inspector, modify the value of max to 100 and progress to 50. This will cause half of the progress bar to be filled. (shown below)

activity_main.xml with Progress Bar

Now we will start the fun stuff. We wanted a circular progress bar but we have a horizontal progress bar so what we need to do is create a drawable resource file. So to do this, we will right click the ‘drawable’ folder and then select ‘New’ then ‘Drawable Resource File’. In the File name field, you can enter anything you would like but I would recommend providing a name that is going generic and that will easily tell you what the intention is like “circular_progress_bar”. If you have a more complex app that needs this type of control with multiple styles then you will need to create a drawable resource for each control. You should note that I changed the root element to “shape” because we want to draw a shape.

New Resource File for circular_progress_bar

In our newly created file, we will create a ring with an inner radius of 2.5 and thickness of 4. So all we need to do is type the following

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="4dp"
    android:useLevel="true">
    <solid android:color="@color/progressbarColor" />
</shape>

The color of this progress bar will reference our colors.xml file. I created a color and named it ‘prgressbarColor’ and set the hex value to red.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="progressbarColor">#FF0000</color>
</resources>

Now that we have setup all the resources that we will need for our project, we need to add those to the attributes to our horizontal progress bar.

Locate the attribute called “progressDrawable” then click the box and select “circular_progress_bar” from the list.

selecting a drawable resource for our progress bar

Now we need to adjust the width and height. For this demo project, I will select 150dp for both.

Google Pixel running our demo application

Now if you need to programatically change the value of this control? well it’s rather simple. First we need to set a value to the id field of this control. Android Studio will assign a default value, usually ‘progressBar’; this value is acceptable but in your custom application, you may wish to use something more meaningful. In my demo app, I called it ‘progressbar_control’.

Open MainActivity.kt and in the method called onCreate, add the following

package com.oneorangetree.circularprogressbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ProgressBar
import android.widget.TextView

class MainActivity : AppCompatActivity() {



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

        val progressBar = findViewById<ProgressBar>(R.id.progressbar_control)
        val progressText = findViewById<TextView>(R.id.progressbar_value_text)
        val increaseBar = findViewById<Button>(R.id.increase_button)
        val decreaseBar = findViewById<Button>(R.id.decrease_button)

        increaseBar.setOnClickListener {
            progressBar.progress += 10
            progressText.text = "${progressBar.progress}/${progressBar.max}"
            //modifyProgressBar(10)
        }
        decreaseBar.setOnClickListener {
            progressBar.progress += -10
            progressText.text = "${progressBar.progress}/${progressBar.max}"
            //modifyProgressBar(-10)
        }
        progressBar.max = 150
        progressBar.progress = 99
        progressText.text = "${progressBar.progress}/${progressBar.max}"
    }
}

Please recommend and share this story with your friends, family and colleagues.