Android Indeterminate Circular Progress Bar Programmatically | Animation

editorial team
android indeterminate circular progress bar, android horizontal progress bar, android indeterminate horizontal progress bar

We will develop Android Indeterminate Circular Progress Bar in this post.

When you want to tell user that some process is going on and he need to wait till the end of that process, progress bar is the best way to do so.

Progress bar can be of two types regarding the progress status.

YouTube Output

Watch how does all four progress bars looks like

Determinate Progress bar and Indeterminate Progress bar.

Determinate Progress bar

When you know the exact time ratio of the loading process, you should use determinate progress bar.

In the determinate progress bar you need to show to user that how much that process has done it’s operations.

Generally, developers use percentage as an indicator to tell user that how much percentage of the process has done it’s operation.

If you want to use determinate circular progress bar checkout how to create custom circular determinate progress bar example.

Read Other Examples On Progress Bar

Indeterminate Progress bar

Indeterminate progress bar means that you do not know how much the process will take.

So this type of progress bar just shows some loading animations without any percentage.

We will develop four types of circular indeterminate progress bars in this example tutorial.

Step 1. Drawable files

For developing custom progress bars, we need to create some drawable xml files to define various properties.

Create a new xml file under res->drawable file and name it “first.xml”

Add below source code in first.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:toDegrees="360">
    <shape android:shape="oval">
        <size
            android:height="48dp"
            android:width="48dp" />
        <gradient
            android:type="sweep"
            android:startColor="#00000000"
            android:centerColor="#e97575"
            android:endColor="#c70505" />
    </shape>
</rotate>

Now prepare another xml file named second.xml in the same directory.

Copy the following code in it

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:shape="ring"
            android:innerRadius="30dp"
            android:thickness="20dp"
            android:useLevel="false">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate android:toDegrees="360">
            <shape
                android:shape="ring"
                android:innerRadius="35dp"
                android:thickness="10dp"
                android:useLevel="false">
                <gradient
                    android:type="sweep"
                    android:startColor="#00000000"
                    android:endColor="#fffb03" />
            </shape>
        </rotate>
    </item>
</layer-list>

Create new xml file in the same directory named “third.xml” and write below lines

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:shape="ring"
            android:innerRadius="30dp"
            android:thickness="20dp"
            android:useLevel="false">
            <gradient
                android:type="radial"
                android:gradientRadius="100"
                android:startColor="#FFF"
                android:endColor="#dc1b1b" />
            <stroke
                android:width="1dp"
                android:color="#AAA" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate android:toDegrees="360">
            <shape
                android:shape="ring"
                android:innerRadius="35dp"
                android:thickness="10dp">
                <gradient
                    android:type="radial"
                    android:gradientRadius="100"
                    android:startColor="#dcdc0b"
                    android:endColor="#00d4ff" />
            </shape>
        </rotate>
    </item>
</layer-list>

Let us understand properties from above three files.

android:shape=”oval”

In the <shape> tag, android:shape=”oval” will define the shape of the progress bar.

Value of shape can be ring, rectangle, line or oval.

android:thichness=”20dp”

This property defines the thickness of the circular progress bar.

android:startcolor & android:endcolor

These two properties are from the <gradient> tag.

First one defines the starting color and second one defines the end color of the gradient effect.

  • There is also a third property called centerColor which defines middle color of the gradient effect.

Now make new xml file again in the same directory and name it “fourth.xml”

Enter below code in fourth.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/image"
    android:pivotX="50%"
    android:pivotY="50%" />

In the fourth.xml file. there is reference to the image file.

Download this image by clicking the below link

[sociallocker]Download Red Progress bar Image[/sociallocker]

Above image will rotate constantly.

Image is developed in such way that when it rotates, it creates a shape like circular progress bar.

Step 2. Create All Four Activities

Prepare a new activity named “FirstActivity”.

You will have now two files activity_first.xml and FirstActivity.java

We do need to do anything with FirstActivity.java here.

Just add the following source code in activity_first.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".FirstActivity">

    <ProgressBar
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:indeterminateDrawable="@drawable/first"
        android:indeterminateDuration="2000" />

</LinearLayout>

We setting the progress bar in the middle of the screen. In the LinearLayout, gravity=”center” is doing this task for us.

In the Progress bar, we have set the drawable as the first.xml file which have created in Step 1.

  • I have set the indeterminateDuration property as 2000. It is defining the speed of the circular progress bar.
  • If you want to increase the speed then increase this property. Decrease this property to slow down the progress bar.

Second Activity

Now create another activity called “Second Activity.”

Here you will have activity_second.xml and SecondActivity.java files.

Add below code in activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".SecondActivity">

    <ProgressBar
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:indeterminateDrawable="@drawable/second"
        android:indeterminateDuration="1000" />

</LinearLayout>

Third Activity

Create new empty activity named third activity.

Add below code in activity_third.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".ThirdActivity">

    <ProgressBar
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:indeterminateDrawable="@drawable/third"
        android:indeterminateDuration="1500" />

</LinearLayout>

Fourth Activity

Prepare another new activity and name it Fourth Activity.

Write down following code in activity_fourth.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".FourthActivity">

    <ProgressBar
        android:indeterminateDrawable="@drawable/fourth"
        android:layout_height="100dp"
        android:layout_width="100dp">

    </ProgressBar>

</LinearLayout>

Step 3. Towards End

Last thing is to add some code in activity_main.xml and MainActivity.java

Write down below source code in activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="First Progress Bar"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:text="Second Progress Bar"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:text="Third Progress Bar"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:text="Fourth Progress Bar"/>

</LinearLayout>

Code for MainActivity.java is as follows

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btn1, btn2, btn3, btn4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        btn3 = findViewById(R.id.btn3);
        btn4 = findViewById(R.id.btn4);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,FirstActivity.class);
                startActivity(intent);
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });

        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,ThirdActivity.class);
                startActivity(intent);
            }
        });

        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,FourthActivity.class);
                startActivity(intent);
            }
        });

    }
}
  • I have taken four buttons in this activity.
  • Each activity will be open on each button click.

Download Source Code For Android Indeterminate Circular Progress Bar

[sociallocker]Download Source Code For Circular Indeterminate Progressbar[/sociallocker]

Best and latest Android Development course