Visual Preview
Visual Preview
| 4 Stages | 2 Stages |
|---|---|
Custom-Progress-SeekBar
A fully Customizable Semi Circle Arc Progress Bar. You can customize the the width and color of both progress and progress place holder from Java and XML. Also you can set the amount of progress bar with percentage from Java and XML. Additionally you can set percentage with a smooth filling animation.
Setting Percentage With Animation
Please note that if you set percentage with animation ".setPercentWithAnimation(10)" at the initial of your activity, set it with a delay to let the view to load and then animate.
Width to Height Ratio
Also for a better circular look, the width to height ratio is recommended to be 2:2 for example if your width is 100dp set your height to 100dp.
Installation
Add this repository to your Module build.gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
repositories {
maven { url 'https://jitpack.io' }
}
}
And then add this dependency to your Project build.gradle
dependencies {
implementation 'com.github.jasvir23007:Custom-Progress-Stages:2.0.0'
}
implementation 'com.github.jasvir23007:Custom-Progress-Stages:2.0.0'
}
Usage
//Java or kotlin
progressBar.setPercent(40);
progressBar.setPercentWithAnimation(10);
progressBar.setProgressBarColor(0xffff00ff);
progressBar.setProgressPlaceHolderColor(0xff00ffff);
progressBar.setProgressBarWidth(10);
progressBar.setProgressPlaceHolderWidth(10);
// to set stages
val list = ArrayList<Int>()
list.add(0)
list.add(50)
list.add(100)
list.add(150)
progressBar.setData(list)
progressBar.setPercentWithAnimation(125)
progressBar.setPercent(40);
progressBar.setPercentWithAnimation(10);
progressBar.setProgressBarColor(0xffff00ff);
progressBar.setProgressPlaceHolderColor(0xff00ffff);
progressBar.setProgressBarWidth(10);
progressBar.setProgressPlaceHolderWidth(10);
// to set stages
val list = ArrayList<Int>()
list.add(0)
list.add(50)
list.add(100)
list.add(150)
progressBar.setData(list)
progressBar.setPercentWithAnimation(125)
//XML
<com.jasvir.seekbar.SemiCircleArcProgressBar
android:layout_width="200dp"
android:layout_height="200dp"
app:percent="30"
app:progressBarColor="#ff00ff"
app:progressPlaceHolderColor="#00ffff"
app:progressBarWidth="10"
app:progressPlaceHolderWidth="10" />
<com.jasvir.seekbar.SemiCircleArcProgressBar
android:layout_width="200dp"
android:layout_height="200dp"
app:percent="30"
app:progressBarColor="#ff00ff"
app:progressPlaceHolderColor="#00ffff"
app:progressBarWidth="10"
app:progressPlaceHolderWidth="10" />
// Jetpack Compose
// Step 1
setContent {
CircularProgressScreen()
}
// Step 2
@Composable
fun CircularProgressScreen() {
// Material 3 Inspired Palette
val PrimaryColor = Color(0xFFFBEAEB)
val TrackColor = Color(0xFF2F3C7E)
val stages = remember { arrayListOf(0,50,100,150) }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
AndroidView(
modifier = Modifier
.size(300.dp) // Maintain aspect ratio
.padding(16.dp),
factory = { context ->
// 1. Initialize the view
SemiCircleArcProgressBar(context).apply {
setData(stages)
setProgressBarColor(PrimaryColor.toArgb())
setProgressPlaceHolderColor(TrackColor.toArgb())
setProgressBarWidth(10.dpToPx())
setProgressPlaceHolderWidth(14.dpToPx())
}
},
update = { view ->
// 2. Perform updates here (this runs on recomposition)
view.setPercentWithAnimation(125)
}
)
}
}
// Step 3
fun Int.dpToPx(): Int {
return TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
this.toFloat(),
Resources.getSystem().displayMetrics
).toInt()
}
// Step 1
setContent {
CircularProgressScreen()
}
// Step 2
@Composable
fun CircularProgressScreen() {
// Material 3 Inspired Palette
val PrimaryColor = Color(0xFFFBEAEB)
val TrackColor = Color(0xFF2F3C7E)
val stages = remember { arrayListOf(0,50,100,150) }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
AndroidView(
modifier = Modifier
.size(300.dp) // Maintain aspect ratio
.padding(16.dp),
factory = { context ->
// 1. Initialize the view
SemiCircleArcProgressBar(context).apply {
setData(stages)
setProgressBarColor(PrimaryColor.toArgb())
setProgressPlaceHolderColor(TrackColor.toArgb())
setProgressBarWidth(10.dpToPx())
setProgressPlaceHolderWidth(14.dpToPx())
}
},
update = { view ->
// 2. Perform updates here (this runs on recomposition)
view.setPercentWithAnimation(125)
}
)
}
}
// Step 3
fun Int.dpToPx(): Int {
return TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
this.toFloat(),
Resources.getSystem().displayMetrics
).toInt()
}