How to change ProgressBar color in Android

To track the progress, we have an UI Element known as progress bar. With respect to real examples, a progress bar resembles as downloading a movie, a song or image, etc.

Types of ProgressBar in Android

Progress bar can be of two types:

1. Determinate Progress Bar
2. Indeterminate Progress Bar

Let us see them in brief:

Determinate Progress Bar: This type of progress bar is mainly used when we know the exact percentage of the thing to be done.
Example: Downloading a file which is of 3MB thus the progress which will be initially shown is 0MB/ 3MB.

Indeterminate Progress Bar: This type of progress bar is used when we do not know the exact percentage of the thing to be done, or the time which it is going to take is unknown.
Example: Loading a file but the internet is weak, so it will take some time, but that time is unknown.

How to change color of Progress Bar?

You can change the color of your progress bar to give it an attractive look. Don’t know how to do it? Follow along to draft one.

Let’s create a drawable resource file for our project. This is going to define how our progress bar will look like. You can design your own custom progress bar using this.

To create the Drawable resource file:

1. Go to app-> res-> layout.
2. Right click on drawable.
3. Go to new-> Drawable resource file.
4. In file name enter the name such as “progress_bar” .
5. In the root element select layer-list.
6. Click ok.

Now here if you wish to give multiple color within your progress bar, in the gradient give the values for the starting color, center color and ending color you want your progress bar to have.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="false">
            <solid android:color="#DDD"></solid>
        </shape>
    </item>

    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="true">

            <gradient
                android:startColor="#f07167"
                android:centerColor="#f9c74f"
                android:endColor="#90be6d"/>

        </shape>
    </item>
</layer-list>

Now insert the progress bar into our xml. The file extension is of type “.xml”. Don’t forget to add your drawable to this progress bar by using “android:progressDrawable=”@drawable/progress_bar”.

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminateOnly="false"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:padding="5dp"
        android:rotation="-90"
        android:progressDrawable="@drawable/progress_bar"
        />

Now, let’s insert two buttons that will be needed to show changes in our progress bar.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@+id/progressBar"
    android:gravity="center"
    android:padding="5dp"
    >
    <Button
        android:id="@+id/btn_increase"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Increase"
        android:padding="5dp"
        android:layout_margin="5dp"
        android:layout_below="@+id/progressBar"/>
    <Button
        android:id="@+id/btn_decrease"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Decrease"
        android:layout_toEndOf="@id/btn_increase"
        android:padding="5dp"
        android:layout_margin="5dp"
        android:layout_below="@+id/progressBar"/>
</LinearLayout>

Let’s add functionality to the buttons so that we can reflect the changes into our progress bar.
To give functionality, first we need to get back to our main_activity, define the variables and then give them the ids of the same.

private lateinit var progressBar: ProgressBar
private lateinit var btn_inc:Button
private lateinit var btn_dec:Button
private var progress =0

Assign the ids of the same to our variables.

progressBar=findViewById(R.id.progressBar)
btn_inc=findViewById(R.id.btn_increase)
btn_dec=findViewById(R.id.btn_decrease)

Now set up the setOnClickListener() method for the buttons. This method is going to provide the functionality to our buttons when they will be clicked.

btn_inc.setOnClickListener{
        if(progress<=90)
        {
            progress += 10
            updateProgressBar()
        }
}
btn_dec.setOnClickListener{
        if(progress>=10)
        {
            progress -= 10
            updateProgressBar()
        }
}

Create a function that will update the value of our variable “progress”.

private fun updateProgressBar()
{
    progressBar.progress=progress
}

Now you can run your application and see the desired changes.
Your application should look somewhat as the following :