Android Indeterminate Circular Progress Bar Programmatically | Animation

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.

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

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

Copy the following code in it

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

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

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

Download this image by clicking the below link

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

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

Third Activity

Create new empty activity named third activity.

Add below code in activity_third.xml

Fourth Activity

Prepare another new activity and name it Fourth Activity.

Write down following code in activity_fourth.xml

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 

Code for MainActivity.java is as follows

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

YouTube Output

Watch how does all four progress bars looks like

Download Source Code For Android Indeterminate Circular Progress Bar

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

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