Custom seek bar/ progress bar with customizable multiple color on background.
video.mp4
For a working implementation of this project see the app/
folder.
Add this in your root build.gradle at the end of repositories
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
Include the library as a local library project or add the dependency in your build.gradle.
dependencies {
implementation 'com.github.SultanAyubi360:SeekbarLibrary:1.2'
}
dependencies {
implementation ("com.github.SultanAyubi360:SeekbarLibrary:1.2")
}
Add the following xml to your layout file.You can use the custom view in following manner:
<androidx.cardview.widget.CardView
android:id="@+id/seekCard"
android:layout_width="match_parent"
android:layout_height="14dp"
android:layout_marginStart="@dimen/_2sdp"
android:layout_marginTop="20dp"
android:layout_marginEnd="@dimen/_2sdp"
app:cardBackgroundColor="@android:color/transparent"
app:cardCornerRadius="4dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.sultanayubi.seekbarlibrary.CustomSeekBarView
android:id="@+id/seekBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:thumb="@null"/>
</androidx.cardview.widget.CardView>
Carview use to make seekbar/progress bar corner round by giving radius.
Reference the View in Kotlin code.
- Kotlin
val customSeekBar = findViewById<CustomSeekBarView>(R.id.seekBar) //Find View By Id
val customSeekBar = binding.seekBar // using binding
How to use and pass values in CustomSeekBarView.
- For showing multiple progess bars.
customSeekBar.configureSegments(
isMultipleCheck = true, // Set whether multiple segments should be checked
segmentCheckValue = 10, // Set the segment check value
totalEmployee = 100, // Set the total number of employees
presentEmployee = 50, // Set the number of present employees
absentEmployee = 20, // Set the number of absent employees
leaveEmployee = 15, // Set the number of employees on leave
lateEmployee = 15 // Set the number of late arrivals
)
- For showing single progess bar.
customSeekBar.configureSegments(
isMultipleCheck = false, // Set whether multiple segments should be checked
segmentCheckValue = 1, // Set the segment check value
totalEmployee = 50, // Set the total number of employees
presentEmployee = 50, // Set the number of present employees
absentEmployee = 0, // Set the number of absent employees
leaveEmployee = 0, // Set the number of employees on leave
lateEmployee = 0 // Set the number of late arrivals
)
isMultipleCheck means just show single progress and make other values 0 to not show.If any progress have zero value it will not show progress bar.
- isMultipleCheck: This is use for whether to show multiple progress bar just do true otherwise for single false.
- segmentCheckValue: If progress has value less then given segment it not show the value on progress so it not cut off.
- presentEmployee: show present employees using green color.
- absentEmployee: show absent employees using red color.
- leaveEmployee: show leave employees using sky bue color.
- lateEmployee: show late employees using yellow color.
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it. ☕ 🍔 🍟 🍎
Support it by joining stargazers to this. ⭐
Also, follow me on GitHub for my next creations! 🤩