 |
VOOZH | about |
|
VOOZH | about |
In this article, we are going to demonstrate how to create a circular progress bar in Android Studio that displays the current progress value and has a gray background color initially. Here progress is shown in the center of the Bar. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
👁 Create Circular Determinate ProgressBar in Android Sample GIF
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that you have to select Java as the programming language.
Step 2: Create a New Drawable Resource File
Create a new Drawable Resource File with the name circle.xml in the drawable folder. To create a new Drawable Resource File navigate to res > drawable and follow the images
given below:
Click on Drawable Resource File, a new dialog box opens as shown in the below image. Add file name and choose Root element as layer-list and click OK.
Step 3: Working with the circle.xml file
Navigate to res > drawable > circle.xml and add the code given below to that file. In this file, we will be drawing a circle that shows progress. Comments have been added to the code for better understanding.
Step 4: Adding style to the ProgressBar
Navigate to res > layout > theme.xml and add the code given below to that file. We have added a new style in this file. Comments have been added properly for clear understanding.
Step 5: Working with the activity_main.xml file
Go to res > layout > activity_main.xml and add the code given below to that file. Here we have added a ProgressBar that shows the progress and a TextView is added to display the percentage of progress. Two Buttons also have been added to increase or decrease the progress. Required comments have been added to the code.
Step 6: Working with the MainActivity.java file
Go to the MainActivity.java file and add the code given below to that file. ProgressBar property is implemented here. Comments have been added to the code for quick and clear understanding.
Output:
