Android Circular Progress Bar With Percentage Programmatically

When developing Android apps, you may need to show android circular progress bar to indicate some process.

Today we are going to develop a android circular progress bar with the percentage of completed process shown at the center of the circle.

Progress bar and percentage will increase with the time simultaneously.

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

Download Source Code for Android circular progress bar

Kotlin Version

This example is also available in the Kotlin version.

Visit it : Kotlin Circular Progress Bar In Android

Creating Android Circular Progress Bar

Follow all the steps below.

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

Make a new project 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 below image.)

drawable2

Put files in Drawable directory

Step 3. Coding circular.xml

Copy and paste following code into circular.xml

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.

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

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.

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 *