Android Circular Progress Bar With Percentage Programmatically

We will develop android circular progress bar in this example tutorial.

In an android app, you need to show various types of progress bar to indicate some process.

Horizontal progress bar, circular progress bar, custom progress bar etc. are the types you can use.

Today we are going to develop an android custom determinate circular progress bar.

We will also show how many percentages the process has finished. Amount of the percentage is displayed at the center of the circular progress bar.

Progress bar and percentage will increase with the time simultaneously. It does mean that we will create determinate circular progress bar today.

Take a look at the output first, and then we will show how to develop the android circular progress bar.

Kotlin Version

This example is also available in the Kotlin version.

Visit it : Kotlin Circular Progress Bar In Android

Tutorials on Progress Bar

Creating Android Circular Progress Bar

Follow all the steps below.

Step 1. Create a new project in the Android Studio.

Make a new project in android studio first.

Step 2. Creating drawable resource file

Create one drawable resource file named circular.xml (drawable resource file means in android studio project’s file structure, you will find a folder named drawable inside a res folder as shown in the below image.)

drawable2

Put files in Drawable directory

Step 3. Coding circular.xml

Copy and paste following code into circular.xml

Consider the above code to generate circular progress bar. There is a grey colored circle which will be covered by the green circle as per below image.

android circular progress bar

The code which will generate grey circle (secondary progress) is as below

android:shape = “ring” 

Above line set the shape of the progress bar as circle or ring.

android:thicknessRatio=”20.0″

Above line will give thickness to our grey circle. You can change this value to make circle thicker or thinner.

  • In the <gradient> tag, center color, end color and startColor has same value so, the whole circle is grey.
  • You can play around by giving different values to all three variants.

Below code will generate the green circle (primary progress bar)

  • Properties of <shape> tag will define the primary progress.
  • It will give ring shape and thickness to the progress bar.
  • <gradient> tag will give green color in three different options (centerColor, endColor , startColor)
  • <rotate> tag will tell compiler to start the green progress bar from 0 value which is initial value. It means that process is starting from the scratch (start from 0%).

Step 4. Updating activity_main.xml

Copy and paste following in activity_main.xml

In above code, we have used a white circular image which you can download here. Put this image in the drawable folder.

TextView is representing how many percentage the process has finished.

Step 5. Describing Handler

We will use Handler and Thread to accomplish our goal.

  • Above code will create a process for the specific amount of time, which can be decided by you.
  • You can change the time amount in the below method.

  • Here 16 is the number you need to increase or decrease as per your requirements.

Step 6. Updating MainActivity.java class

Final code for MainActivity.java

Details Of the Above Code

Look at the below snippets

Above code will declare the objects of Resource, Drawable and ProgressBar classes.

In the above coding lines,

  • First line will set the progress as 0. It means that green progress bar will start from the 0 percentage.
  • Second line is setting the secondary progress bar (grey circle) as 100. It means that the whole circle will be created at the starting of the thread.
  • Third line will set the maximum of percentage. Generally, it is 100 in most of the cases because whenever we deal with percentage as a measuring parameter, the maximum number is always 100.
  • Fourth line will give layouts from drawable file (circular.xml) to both the progress bars. We have created this file in the Step 3 above.
  • After initialization process, we are starting the thread.
  • Thread will start our circular progress from 0 percentage to 100 percentage in around 3 seconds.

That’s all for android circular progress bar. Thank you for visiting and keep sharing resources of demonuts to other learners.

Cheers and happy coding!

If you have any questions, then feel free to ask in comment section.

Any suggestion about developing certain type of tutorial are also welcomed.

Thank you.

Download Source Code for Android 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...

27 Responses

  1. online education degrees says:

    After checking out a handful of the articles on your site, I seriously like your technique of writing a blog. I saved it to my bookmark webpage list and will be checking back in the near future. Please visit my website as well and let me know your opinion.

    • Hardik Parsania says:

      Hello,
      Thank you for appreciation on this site, these kind of words really encourage us to make this site and tutorials more better and better.
      I visited your site and found that you are also providing tips for fresh college students so that they can avoid most problems faced by new students going to college for first time.So yes we both are doing same kind of things-help students to make their way. I will surely share your site with students and you can also share our site with learners and we will make sure most of the students will get maximum benefits from our efforts. Thanks and cheers! 🙂

  2. education college says:

    Hi there to all, how is all, I think every one is getting more from this site, and your views are pleasant for new users.|

  3. online education says:

    This article presents clear idea in favor of the new people of blogging, that in fact how to do blogging.

  4. education college says:

    I’m truly enjoying the design and layout of your website. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme? Fantastic work!

  5. Ramesh says:

    Could you please explain more about ‘circular.xml’? How does the tag and ‘useLevel’ attribute affect the progress animation?

  6. Ramesh says:

    ‘rotate’ tag

  7. Hardik Parsania says:

    In rotate tag, pivot X and pivotY represents center of the circle. Both 50%, means equal distance from height and width.
    For android:useLevel attribute, visit “Shape Drawable” section of this link.

  8. wife creampie says:

    Say, you got a nice blog post.Thanks Again. Want more.

  9. corburterilio says:

    Perfectly composed content material, thankyou for selective information.

  10. Alex says:

    Fantastic goods from you, man. I have understand your stuff previous to and you’re just extremely fantastic.

  11. Lucian says:

    Can we set the max value from the app? Let’s say the user wants to set a max value of 2000 (steps) can we do that on the settings menu ?

    • Hardik Parsania says:

      May be you can use counter variable (integer variable) for this. Increment counter until 200 and then stop process.

  12. roman says:

    Hello ,
    i want to add a progress bar with timer , after the timer end an other activity shows up. like this :
    page 1 has boutton after i click the boutton a progress bar shows and then after specific time go to the next page . you have a tutorial about it ??
    thanks

  13. Mahesh says:

    Thanks for this tutorial..!
    How can we get the rounded corner edges for the progress?

  14. anmihovil says:

    Nice tutorial, everything is working as described but I have some questions :-/ What defines the size of the Progress bar? In main_activity.xml it is suposed to be 250dp, but diameter of the circle of Progress bar is much smaller than that. I tried to modify some parameters in circular.xml but nothing changed. What’s the secret?
    Thank you very much for your fine effort, keep up the good work!

  15. Jack says:

    Hey, can you give me more detail about the circular.xml settings? I tried to apply your code to my project but nothing showed up, I guess there’s something wrong with the circular.xml settings

  16. Arun says:

    Hey Hardik ! Thank you so much for providing this tutorial.. it is very helpful..

  17. Arin says:

    layer list is not present.Please provide the correct code also the image

  18. Jilson P Jose says:

    Dear Mr. Hardik,
    Thank you so much for the tutorial.. I was really searching for an implementation of donut chart… but I had not got anything upto my satisfaction.. Thank you again…

  19. Bogdan says:

    Thanks for your code. I would like to make the area around the progress smaller. How can I achieve that? I have other components that I want to stay closer to the progress, without overlapping.

Leave a Reply

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