Welcome to the circular progress bar Android tutorial. Progress bars are widely and used in many forms in Android development, but one that is most loved is the “circular progress bar with text”.
If you have been in Android development for a month or two, think at least once how I can get a progress bar with text progress. Well you are in luck because we are going to do just this tutorial Are as shown in the picture and possibly a little more.
Android has a very easy to create circular progress bar with text and likes 4 easy steps to do it, but before we dive right in, let’s take a look at what it really is.
What is a progress bar?
A UI element that indicates that a process is executing and shows progress as its name would suggest. The progress bar normally supports two modes to represent progress.
- Set (by default linear)
- Indeterminate (by default circular)
Indefinite progress bar
An example of this might be the very default progress bar. We now have circular motion with an animation that we can consider using these types of progress bars when an operation occurs under execution and we won’t know that How much time will it take.
A great and most familiar example of this might be an epi endpoint call. We don’t know what can happen until we get a response. Here the use of the indefinite progress bar makes sense due to uncertainty.
Determine progress bar
These are progress bars for tasks that are somewhat known to us for example how long it would take to download a file from a server. They are recommended to be used in applications where these tasks are for users to watch as they progress.
A default scheduling progress bar is a linear line that can be set dynamically in progress and can also be hardcoded (but that will not make sense)
pay attention: Although the default types of these are circular and linear, this does not mean that a defined progressbar cannot be circular and vice versa.
What exactly are we going to make?
To answer that we can see this picture
And also optionally
This can be termed as a circular deterministic progress bar, shown with the help of a TextView in-between progress.
We can also do this further and create a custom view to do this but to make this tutorial a bit easier we are going to use another approach.
Prerequisites
- Android studio
- Basic knowledge of Android visuals
- Kotlin Basic Knowledge
We can use both an activity or a piece here. So let’s start with the steps immediately!
Make scene
Here we have used an activity to create this view, which has an interrupt view as its parent
1 2 3 4 5 4 . . 4 10 1 1 12 13 14 15 14 1. 1. 19 20 21 22 23 24 25 24 2. 2. 29 30 |
<Androidx.To obstruct.Widget.To obstruct Android:Layout_process=“match parent” Android:Layout_height=“wrap content” Android:Padding=“20dp”> <progress bar Android:Id=“@ + Id / circular_determative_pub” Android:Layout_process=“150dp” Android:Layout_height=“150dp” Android:Indefinitely=“false” Android:Progressable= =“@ drawable / pb_circular_determinative” App:Layout_constraintBottom_toBottomOf= =“Parent” App:Layout_constraintEnd_toEndOf= =“Parent” App:Layout_constraintStart_toStartOf=“Parent” App:Layout_constraintTop_toTopOf=“Parent” /> <text view Android:Id= =“@ + Id / progress_tv” Android:Layout_process= =“wrap content” Android:Layout_height=“wrap content” Android:Hand color= =“@android: color / black” App:Layout_constraintBottom_toBottomOf=“@ + Id / circular_determative_pub” App:Layout_constraintEnd_toEndOf=“@ + Id / circular_determative_pub” App:Layout_constraintStart_toStartOf= =“@ + Id / circular_determative_pub” App:Layout_constraintTop_toTopOf=“@ + Id / circular_determative_pub” equipment:The text= =“50%” /> </Androidx.To obstruct.Widget.To obstruct> |
This should look like this in the Design tab.
It’s not even what we want but we’re only halfway now
It is clear that there is an error because we have not yet created the file pb_circular_determinative.xml So let’s do this.
Create a drawable resource
You just need to create a new file inside the drawable folder. Just like that Right click -> New -> Drawable resource file.
Here we are using a layer-list because it is used to set up more than one item simultaneously, although an item in the layer-list is placed on top, so we should keep this in mind, While designing the drawable
Add a background for the progress bar (optional)
1 2 3 4 5 4 . . 4 10 1 1 12 13 14 15 14 1. |
<?xml the version= =“1.0” Encoding=“utf-8”?> <Layer–The list xmlns:Android=“http://schemas.android.com/apk/res/android”> <item Android:Id=“@android: id / background”> <Shape Android:Shape= =“ring” Android:Use the=“false” Android:Thickness ratio= =“20” > <Solid Android:colour= =“@android: color / darker_gray”/> </Shape> </item> </Layer–The list> |
Now that we’ve created it, let’s look at how each part “id” item tells the Android system what kind of item it is so that if you apply a tint to the background it only applies to “shape” “What defines the size we want and” thickRatio “sets the ring thickness according to the size of the shape,” useLevel “however is the feature that helps the system understand if the drawable will grow with progress. For the background we set it to “False”
Now lets make the main progress
<item Android:Id= =“@android: id / progress”> <Spin Android:From deadgrass=“270” Android:toDegrees= =“270”> <Shape Android:Shape=“ring” Android:Thickness ratio=“20”> <Solid Android:colour= =“@ Color / color/> </Shape> </Spin> </item> |
Here we need to add an item that says its item is progress by setting Id To progress we start with this draw Spin By default the tag as the implicit shape starts from the right side which does not appear in the background but will appear here
Toddy And From Dagdi Ask to rotate the implicit shape to the right by 270 degrees which brings it to the top
Shape Defines what size we want and Thickness ratio Determines the thickness of the ring according to the size of the shape
Here we left using Use the This is because we have determined Id For a system ID in this item and it will automatically determine the progress on the shape
Customizing Size Color
To change the color of the shape we can add shield instead of a Solid Like this
Here we use Type It is a feature to determine how we want to change the color which in this case is only suitable in sweep. Other options do not do with the circular pattern and this is what we need.
1 2 3 4 5 4 . . 4 10 1 1 12 13 14 15 14 1. |
<item Android:Id=“@android: id / progress”> <Spin Android:From deadgrass=“270” Android:toDegrees=“270”> <Shape Android:Shape= =“ring” Android:Thickness ratio= =“20”> <shield Android:Type=“Do the sweeping” Android:The starter=“@ Color / color Android:Center edge= =“@Color / color painting” Android:Endcolor= =“@Color / colorpremitterdark” /> </Shape> </Spin> </item> |
Add a customized secondary progress bar (optional)
<item Android:Id= =“@ Thyroid: id / secondaryprogress”> <Spin Android:toDegrees= =“270” Android:From deadgrass= =“270”> <Shape Android:Thickness ratio=“20” Android:Shape=“ring”> <Solid Android:colour=“@android: color / black”/> </Shape> </Spin> </item> |
Here we are going to add another item between the background and progress item so that it stays in between them, while it is now visible, in this we have changed only Id And its position is between the 2 items that you can subtract Thickness ratio Test it to show from the back of the main progress that we are now doing with our drawable resource
See test
To test this setup we go back to the layout and set these attributes in ProgressBar equipment:Progress= =“0“ And change the progress in Textview The text To 0%
And if you are following optional steps to add secondary progress bar equipment:Secondary master= “0“
If you have only followed the necessary steps then your view should look like this
And if you have followed the optional steps, then it should look at it this way.
Although we have almost completed our approach, the progress bar is incomplete without functionality to dynamically determine progress.
Setting progress bar for dynamic use
enjoy setProgressTo()Progress: Int){{ Progress_tv.The text = “$ Progress%” circ_determinative_pb.Progress = Progress } enjoy setSecondaryProgressTo()Progress: Int){{ circ_determinative_pb.Secondary master = = Progress } |
An easy way to make changes from within the activity might be to set the progress bar helper method, which you can use to set the progress from within the activity at any time and for progress at any time .
And all we need is that we can use this progress bar to determine a dynamic progression in a circular way and to show progress with a text.
The conclusion
So that’s it for Circular progress bar android tutorial friend. I hope I have taught you something new with this post. And if you think this is really useful, please support me by sharing this post with your friends. Thank you.