Radial Progress Bar
Radial ProgressBar inspired by Apple Watch OS. It is highly Customisable
Preview of Radial Progress Bar
Getting Started
Step 1. Add the JitPack repository to your Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
implementation 'com.github.MindorksOpenSource:RadialProgressBar:v1.3'
}
Step3. To use this in XML File, use
<com.mindorks.RadialProgressBar
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/progress_view"
app:useRoundedCorner="true"
app:innerMaxProgress="100"
app:outerMaxProgress="100"
app:centerMaxProgress="100"
app:isAnimationOn="true"
app:innerProgress="50"
app:centerProgress="50"
app:hasTwoProgressView="false"
app:hasOneProgressView="false"
/>
Step 4. Link the XML in Activity File using,
val radialProgressBar = findViewById(R.id.progress_view)
or
RadialProgressBar rpb = findViewById(R.id.progress_view) //if using Java
thats it and how you can use the RadialProgressView in your project.
To Customise it according to your need you can use,
| Feature | XML | Activity (Java/Koltin) | Default |
|---|---|---|---|
| Set Start Angle OuterView | app:outerProgressStartAngle="angle" | rpb.setStartAngleOuterView(angle) | 270 |
| Set Start Angle CenterView | app:centerProgressStartAngle="angle" | rpb.setStartAngleCenterView(angle) | 270 |
| Set Start Angle InnerView | app:innerProgressStartAngle="angle" | rpb.setStartAngleInnerView(angle) | 270 |
| Set EmptyProgressColorOuterView | app:outerEmptyProgressColor="color" | rpb.setEmptyProgressColorOuterView(color) | #F5F5F5 |
| Set EmptyProgressColorCenterView | app:centerEmptyProgressColor="color" | rpb.setEmptyProgressColorCenterView(color) | #F5F5F5 |
| Set EmptyProgressColorInnerView | app:innerEmptyProgressColor="color" | rpb.setEmptyProgressColorInnerView(color) | #F5F5F5 |
| Set MaxProgressOuterView | app:outerMaxProgress="Integer" | rpb.setMaxProgressOuterView(Integer) | 100 |
| Set MaxProgressCenterView | app:centerMaxProgress="Integer" | rpb.setMaxProgressCenterView(Integer) | 100 |
| Set MaxProgressInnerView | app:innerMaxProgress="Integer" | rpb.setMaxProgressInnerView(Integer) | 100 |
| Set OuterProgress | app:outerProgress="Integer" | rpb.setOuterProgress(Integer) | 0 |
| Set CenterProgress | app:centerProgress="Integer" | rpb.setCenterProgress(Integer) | 0 |
| Set InnerProgress | app:innerProgress="Integer" | rpb.setInnerProgress(Integer) | 0 |
| Set OuterProgressColor | app:outerProgressColor="color" | rpb.setOuterProgressColor(listOfColor) | #f52e67 |
| Set CenterProgressColor | app:centerProgressColor="color" | rpb.setCenterProgressColor(listOfColor) | #c2ff07 |
| Set InnerProgressColor | app:innerProgressColor="color" | rpb.setInnerProgressColor(listOfColor) | #0dffab |
| Set Elevation | app:hasElevation="true/false" | rpb.hasElevation(true/false) | false |
| Set EmptyProgressBar | app:hasEmptyProgressBar="true/false" | rpb.hasEmptyProgressBar(true/false) | false |
| Set Animation | app:isAnimationOn="true/false" | rpb.setAnimationInProgressView(true/false) | true |
| Set RoundedCorner | app:useRoundedCorners="true/false" | rpb.useRoundedCorners(true/false) | true |
| Set ProgressValues | ---- | rpb.setProgressValues(int,int,int) | ---- |
| Set MaxProgressValues | ---- | rpb.setMaxProgressValues(int,int,int) | ---- |
| Set Only OuterProgress | app:hasOneProgressView="true/false" | rpb.setOneProgressView(true/false) | false |
| Set Only Outer and CenterProgress | app:hasTwoProgressView="true/false" | rpb.setTwoProgressView(true/false) | false |
| Set Circle Thickness*** | app:circleThickness="float" | rpb.setCircleThickness(float) | 1f |
| Set Circle Padding | app:circlePadding="float" | rpb.setCirclePadding(float) | 10f |
**angle = 0/90/180/270
***circleThickness between 0f to 1f
You can also get value related to the RadialProgressView,
| Feature | Value |
|---|---|
| Get Outer Progress | rpb.getOuterProgress() |
| Get Inner Progress | rpb.getInnerProgress() |
| Get Center Progress | rpb.getCenterProgress() |
| Get Start Angle OuterProgress | rpb.getStartAngleOuterView() |
| Get Start Angle InnerProgress | rpb.getStartAngleInnerView() |
| Get Start Angle CenterProgress | rpb.getStartAngleCenterView() |
| Get Start Angle OuterProgress | rpb.getMaxProgressOuterView() |
| Get Start Angle InnerProgress | rpb.getMaxProgressInnerView() |
| Get Start Angle CenterProgress | rpb.getMaxProgressCenterView() |
For Gradient Shade,
val outerColor = ArrayList<Int>()
outerColor.add(Color.parseColor("#fbab00"))
outerColor.add(Color.parseColor("#f5004b"))
progress.setOuterProgressColor(outerColor)
Todo
- If using One progressbar, user can also have an option to display the value in text
If this library helps you in anyway, show your love β€οΈ by putting a β on this project βοΈ
Check out Mindorks awesome open source projects here
Contributor