Skip to content

Repository files navigation

alt text

Radial Progress Bar

Radial ProgressBar inspired by Apple Watch OS. It is highly Customisable

Preview of Radial Progress Bar

MindorksMindorks CommunityLicense

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,

FeatureXMLActivity (Java/Koltin)Default
Set Start Angle OuterViewapp:outerProgressStartAngle="angle"rpb.setStartAngleOuterView(angle)270
Set Start Angle CenterViewapp:centerProgressStartAngle="angle"rpb.setStartAngleCenterView(angle)270
Set Start Angle InnerViewapp:innerProgressStartAngle="angle"rpb.setStartAngleInnerView(angle)270
Set EmptyProgressColorOuterViewapp:outerEmptyProgressColor="color"rpb.setEmptyProgressColorOuterView(color)#F5F5F5
Set EmptyProgressColorCenterViewapp:centerEmptyProgressColor="color"rpb.setEmptyProgressColorCenterView(color)#F5F5F5
Set EmptyProgressColorInnerViewapp:innerEmptyProgressColor="color"rpb.setEmptyProgressColorInnerView(color)#F5F5F5
Set MaxProgressOuterViewapp:outerMaxProgress="Integer"rpb.setMaxProgressOuterView(Integer)100
Set MaxProgressCenterViewapp:centerMaxProgress="Integer"rpb.setMaxProgressCenterView(Integer)100
Set MaxProgressInnerViewapp:innerMaxProgress="Integer"rpb.setMaxProgressInnerView(Integer)100
Set OuterProgressapp:outerProgress="Integer"rpb.setOuterProgress(Integer)0
Set CenterProgressapp:centerProgress="Integer"rpb.setCenterProgress(Integer)0
Set InnerProgressapp:innerProgress="Integer"rpb.setInnerProgress(Integer)0
Set OuterProgressColorapp:outerProgressColor="color"rpb.setOuterProgressColor(listOfColor)#f52e67
Set CenterProgressColorapp:centerProgressColor="color"rpb.setCenterProgressColor(listOfColor)#c2ff07
Set InnerProgressColorapp:innerProgressColor="color"rpb.setInnerProgressColor(listOfColor)#0dffab
Set Elevationapp:hasElevation="true/false"rpb.hasElevation(true/false)false
Set EmptyProgressBarapp:hasEmptyProgressBar="true/false"rpb.hasEmptyProgressBar(true/false)false
Set Animationapp:isAnimationOn="true/false"rpb.setAnimationInProgressView(true/false)true
Set RoundedCornerapp:useRoundedCorners="true/false"rpb.useRoundedCorners(true/false)true
Set ProgressValues----rpb.setProgressValues(int,int,int)----
Set MaxProgressValues----rpb.setMaxProgressValues(int,int,int)----
Set Only OuterProgressapp:hasOneProgressView="true/false"rpb.setOneProgressView(true/false)false
Set Only Outer and CenterProgressapp:hasTwoProgressView="true/false"rpb.setTwoProgressView(true/false)false
Set Circle Thickness***app:circleThickness="float"rpb.setCircleThickness(float)1f
Set Circle Paddingapp: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,

FeatureValue
Get Outer Progressrpb.getOuterProgress()
Get Inner Progressrpb.getInnerProgress()
Get Center Progressrpb.getCenterProgress()
Get Start Angle OuterProgressrpb.getStartAngleOuterView()
Get Start Angle InnerProgressrpb.getStartAngleInnerView()
Get Start Angle CenterProgressrpb.getStartAngleCenterView()
Get Start Angle OuterProgressrpb.getMaxProgressOuterView()
Get Start Angle InnerProgressrpb.getMaxProgressInnerView()
Get Start Angle CenterProgressrpb.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

About

Radial ProgressBar inspired by Apple Watch OS. It is highly Customisable

Topics

Resources

Contributing

Stars

167 stars

Watchers

3 watching

Forks

Releases

Packages

Contributors

Languages