Home
Here you can find more about customizing your progress bar, and how to use the library as a whole
The library is made out of two classes representing two types of progress bars
- ProgressBar
- ProgressBarAntiAlias
Although both classes are practically the same, the ProgressBarAntiAlias class have some technique for mimicking antialiasing when clipping path. The ProgressBar class extends ImageView class, while the ProgressBarAntiAlias extends ProgressBar class, both classes uses vector animation for stripes movement. The library is base upon the code presented by Google, you can find more about vector assets and animation HERE
The problem lies on the fact that clipping a path or shape in android has no antialiasing applied, that means that after clipping the left shape will have rough edges. On the image below is shown the difference between progress bar with or without antialiasing
ProgressBar class extend the ImageView class and overrides the onDraw() method, to make a clipping mask over the canvas from a clip path, that was previously generated. A new clip path is generated each time the loading percentage is change using the property percentage . The clip path is a rectangle with round corners, each corner has it separate value that can be set by the user. That way round corners will be applied only to the one you choose. Using the clipPath method, no antialiasing is applied that way edges surrounding the path are not smoothed out. That is why there is a another class ProgressBarAntiAlias that uses some technique to use the antialiasing from the Paint class.
- advantages - faster, use it when you need better performance
- disadvantages - does not support anti-aliasing
ProgressBarAntiAlias class extend the ProgressBar class and also overrides the onDraw() method, but it uses three bitmaps that are locked in with three separate canvases. That way everything that is being draw on to those canvases are also drawn on to there corresponding bitmaps. The first is the backgroundBitmap, it has the background animated screenshot, from the super class. The second is the clipBitmap, it has the clip path that was previously genereted from the current loading percentage drawn. And the third one it for rendering the result of the clipping between the background and clip bitmaps. Then the third bitmap is draw on the original canvas from the onDraw method.
- advantages - support anti-aliasing
- disadvantages - slower, use it when you need better quality
The ProgressBar has some custom properties, that can be set either using xml or Java/Kotlin. The available properties are show below:
- percentage - set the initial loading percentage
- corner_radius - set all four corner radii to given value
- top_left_corner_radius - set top left corner radius
- top_right_corner_radius - set top right corner radius
- bottom_right_corner_radius - set bottom right corner radius
- bottom_left_corner_radius - set bottom left corner radius
- start_animation - shows whether the stripe animation should auto start
There are nine pre-made, vectors with animations for different color models. Color models that are available: black, red, green, yellow, orange, pink, purple, blue and light green For changing the color of the progress bar the attribute srcCompat is used. All color models are available in the ./res/drawable folder.
Here is an example of setting the color to green using the srcCompat attribute:
app:srcCompat="@drawable/green_progress_bar"To change all four corner with the same value use the attribute: corner_radius. For individual corners, use any of the four corner attributes, for single corner:
- top_left_corner_radius
- top_right_corner_radius
- bottom_right_corner_radius
-
bottom_left_corner_radius
If round background is used, make sure the corner radii matches the one on your progress bar.
Here is an example of setting the left corner radii attributes:
app:top_left_corner_radius="50dp"
app:bottom_left_corner_radius="50dp"To start the stripe animation on view inflation, and not start it manually with the start() method, use the attribute start_animation
Here is an example of setting the auto start attribute:
app:start_animation="true" If you don`t want to use any of the pre-made models you could create your own custom progress bar with different color, stripe speed and angle by creating a new xml files, and set the required changes you like. Down below are the steps you need to follow to create your own custom progress bar.
First create xml file in your drawable folder ./res/drawable/custom_progress_bar.xml and then paste this xml code:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt" >
<aapt:attr name="android:drawable">
<vector
android:width="360dp"
android:height="32dp"
android:viewportWidth="360"
android:viewportHeight="32">
<clip-path android:pathData="M8,0L352,0A8,8 0,0 1,360 8L360,24A8,8 0,0 1,352 32L8,32A8,8 0,0 1,0 24L0,8A8,8 0,0 1,8 0z" />
<group android:name="loading_bar">
<path android:pathData="M0,0 L424,0 L424,32 L0,32 Z">
<aapt:attr name="android:fillColor">
<gradient
android:endX="32"
android:endY="32"
android:startX="0"
android:startY="0"
android:tileMode="repeat"
android:type="linear">
<item
android:color="#919191"
android:offset="0.0" />
<item
android:color="#2E2E2E"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
</group>
<path
android:fillAlpha=".2"
android:fillColor="#FFF"
android:pathData="M8,2L352,2A6,6 0,0 1,358 8L358,8A6,6 0,0 1,352 14L8,14A6,6 0,0 1,2 8L2,8A6,6 0,0 1,8 2z" />
</vector>
</aapt:attr>
<target android:name="loading_bar">
<aapt:attr name="android:animation">
<!-- translate left by 2 stripes -->
<objectAnimator
android:propertyName="translateX"
android:duration="700"
android:interpolator="@android:interpolator/linear"
android:valueFrom="0"
android:valueTo="-64"
android:repeatCount="-1" />
</aapt:attr>
</target>
</animated-vector>Now you can edit the properties you like, to change the speed change the objectAnimator android:duration property from 700, to any value you would like. This property shows how long it would take for animation to finish, but since the android:repeatCount is set to -1, it will loop infinitely. Bigger value means slower animation.
<objectAnimator
...
android:duration="700"
.../>To change the color for the progress bar, change the gradient color stops
<gradient
...>
<item
android:color="#919191"
android:offset="0.0" />
<item
android:color="#2E2E2E"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="0.5" />
<item
android:color="#ffffff"
android:offset="1.0" />
</gradient>To lean more about how the animation works you can watch this VIDEO from Google.
You can create a background with round corners using shape, that way there will be a background behind the progress bar. To make a round background create new xml file in yout ./res/drawable folder. There you can specify the color, you can create solid color or use gradient it all to your choice. Make sure to match the corner radii for the background and for the progress bar it self.
Here is a example of creating a custom round background ./res/drawable/custom_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#1B1B1B"/>
<corners android:bottomRightRadius="100dp" android:bottomLeftRadius="100dp"
android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
</shape>Then include your background with the background attribute of your progress bar. You can use the padding property to set the background size over the progress bar.
Now you can include your custom progress bar, the same way as with the pre-made one. Just paste this xml code in you main activity layout file
<com.slaviboy.progressbar.ProgressBar
android:id="@+id/progress_bar"
android:layout_width="200dp"
android:background="@drawable/custom_background"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_marginBottom="10dp"
app:corner_radius="100dp"
android:padding="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:percentage="50"
app:start_animation="true"
app:srcCompat="@drawable/custom_progress_bar" />Here is an example using Kotlin
// set loading percentage to 75
val progressBar : ProgressBar = findViewById(R.id.progress_bar)
progressBar.percentage = 75.0f