A polished and flexible progress view for Android
Progressbar is one of the most frequently used widgets in Android development. However as we know, the default ProgressBar provided by Android SDK has poor customizable options. There is no way to show the current progress value, no progress animations, no gradient/rounded basic attributes. Every time we should create a different drawable XML file, but it is still limited. This posting is about how to implement a polished and flexible ProgressView, fully customizable with animations and its UX design philosophy.
UX philosophy
Generally, progressBar draws only progress. So we have to create a TextView or another view for showing the progress to users.
This kind of design has some bad points.
- We have to manage one more separate resource like TextView.
- Requires more spaces in the layout.
- We have to make new text color definitions for supporting Dark mode.
- From the perspective of UX, users have to look separated two views and merge as one in their heads.
Then how can we make it better?
Integrating the TextView and progress bar is a very simple solution. Now we have to resolve one more issue, the color of the TextView. If we align the textView in the center, the color of the TextView should be changed following progress. So the result will be that some letters would be colored and the rests are not colored. Depending on the color, the readability may be poor because the color of the TextView does not have consistency.
So what is the next candidate?
TextView is integrated into the progress bar and the TextView moves flexibly according to the progress. If the width size of the TextView is bigger than the width size of the progress, the TextView will be located on the outside (right side) of the progress bar. We can consider the color of the TextView according to the background color of the container. And if the width size of the progress is bigger than the width size of the TextView, the TextView will be located on the inside of the progress bar.
Now the TextView has the color consistency, and looks more polished!
I was inspired by Bella Choi who worked with me in the previous company as a UI/UX designer.
Including in your project
Now let’s include the ProgressView in our project!
Firstly we should add a dependency code to your module’s build.gradle file.
dependencies {
implementation "com.github.skydoves:progressview:1.0.8"
}If you want to get the latest version, you can check it here.
How to use
Here is a basic example of implementing ProgressView in your XML layout.
We can fully customize the attributes of the ProgressView including colors, min/max/current progress, animation, rounding, padding, spaces between the label and progress bar.
Gradient
We can give a gradient effect to the progress bar using the below attributes.
We can change the progress color and gradient colors using the below methods.
Animations
We can implement progress animations when the progress value is changed. There is four basic animations are provided in this library.
We can control the progress filling animation using the below attributes or method.
Highlighting Effect
We can give a highlighting effect on the progress bar when clicked.
Here is the real code result.
The highlighting effect will be shown on the progress bar exclude the container. We can improve the visuality using a popup or toast. Here is one more tip, we can get the highlight view from the progress view, and we can show up the popup in the center of the progress. The height of the highlight view is variable, so we can improve something using the highlight view.
OnChangeListener, OnClickListener
We can listen to the progress value is changed or the progress bar is clicked. By using the OnProgressChangeListener we can listen about the progress value changing and we can change the label text using the changed progress value. Also, we can use the OnProgressClickListener instead of the OnClickListener. The difference is OnProgressClickListener will be invoked when clicked the progress bar excluding the container.
Conclusion
In this posting, we looked around how ProgressView library is originated and how to use it. Android developers should understand basic UI/UX related philosophies because we are coworking with designers directly and anyway we are creating visible things. So we should combine well the designs and development philosophy to suit each situation in the company’s project.
You can reference more details about the ProgressView in the below link!
