https://github.com/emirhanemmez/MultiStepsProgressBar
A customizable onboarding progressbar component
https://github.com/emirhanemmez/MultiStepsProgressBar
android android-library compose compose-library jetpack-compose kotlin onboarding onboarding-screen progressbar
Last synced: 7 months ago
JSON representation
A customizable onboarding progressbar component
- Host: GitHub
- URL: https://github.com/emirhanemmez/MultiStepsProgressBar
- Owner: emirhanemmez
- License: apache-2.0
- Created: 2023-11-21T21:22:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-29T08:47:23.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T15:45:14.135Z (12 months ago)
- Topics: android, android-library, compose, compose-library, jetpack-compose, kotlin, onboarding, onboarding-screen, progressbar
- Language: Kotlin
- Homepage:
- Size: 743 KB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - emirhanemmez/MultiStepsProgressBar - A customizable onboarding progressbar component (Kotlin)
README
# MultiStepsProgressBar
A customizable progressbar component can be used in onboarding screens for Jetpack Compose.
## Implementation
Add jitpack.io maven to **settings.gradle.kts**
```gradle
pluginManagement {
repositories {
google {
content {
includeGroupByRegex("com\\.android.*")
includeGroupByRegex("com\\.google.*")
includeGroupByRegex("androidx.*")
}
}
mavenCentral()
mavenLocal()
maven(url = "https://jitpack.io")
gradlePluginPortal()
}
}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenLocal()
maven(url = "https://jitpack.io")
mavenCentral()
}
}
```
Add library dependency to your **build.gradle.kts**
```gradle
implementation("com.github.emirhanemmez:MultiStepsProgressBar:version")
```
## Usage
Define your **stepList** as **SnapShotStateList** in your ViewModel. For example:
```kt
class MainViewModel : ViewModel() {
private val _stepList = mutableStateListOf().apply {
addAll(
listOf(
StepData(
stepId = Id.FirstStep,
stepName = "Step1",
progress = ProgressProperties.PROGRESS_FULL
),
StepData(
stepId = Id.SecondStep,
stepName = "Step2",
progress = ProgressProperties.PROGRESS_NONE,
),
StepData(
stepId = Id.ThirdStep,
stepName = "Step3",
progress = ProgressProperties.PROGRESS_HALF
)
)
)
}
val stepList: List = _stepList
fun updateProgressesWithRandomValues() {
_stepList.updateStepProgress(Id.FirstStep, Random.nextFloat())
_stepList.updateStepProgress(Id.SecondStep, Random.nextFloat())
_stepList.updateStepProgress(Id.ThirdStep, Random.nextFloat())
}
sealed class Id(id: Int) : StepId(id) {
data object FirstStep : Id(0)
data object SecondStep : Id(1)
data object ThirdStep : Id(2)
}
}
```
Observe **stepList** in your composable function:
```kt
class MainActivity : ComponentActivity() {
private lateinit var mainViewModel: MainViewModel
override fun onCreate(savedInstanceState: Bundle?) {
mainViewModel = ViewModelProvider(this)[MainViewModel::class.java]
super.onCreate(savedInstanceState)
setContent {
MyTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(56.dp))
MultipleStepsProgressBar(
stepDataList = mainViewModel.stepList
)
Spacer(modifier = Modifier.height(56.dp))
Button(onClick = {
mainViewModel.updateProgressesWithRandomValues()
}) {
Text(text = "Click for random progresses")
}
}
}
}
}
}
}
```
And update progress with this extension function:
```kt
fun SnapshotStateList.updateStepProgress(stepId: StepId, progress: Float) {
val index = stepId.index
val step = this[index]
this[index] = step.copy(progress = progress)
}
```
For UI customization please check [StepProperties.kt](https://github.com/emirhanemmez/MultiStepsProgressBar/blob/main/multistepsprogressbar/src/main/java/com/emirhanemmez/multistepsprogressbar/model/StepProperties.kt)