💜 KotStep is a Jetpack Compose library that simplifies the creation of customizable step-by-step UI components in your Android applications. It allows you to easily integrate vertical and horizontal stepper components with icons, titles, and various customization options.
- Vertical and horizontal stepper components.
- Customizable colors, icons, and labels for each step.
- Support for both text labels and icon-based steps.
- Optional checkmark icons for completed steps.
- Easily integrate step-by-step user interfaces into your Jetpack Compose apps.
To get started with KotStep in your Android Jetpack Compose project,
Add it in your root build.gradle
at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Lastly, add the following dependency to your app's build.gradle.kts
(Kotlin) or build.gradle
(Groovy) file:
Kotlin
dependencies {
implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
Groovy
dependencies {
implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}
- Horizontal Sequenced Stepper
HorizontalSequencedStepper(
totalSteps = 5,
currentStep = 1
)
Parameter | Description | Default Value |
---|---|---|
modifier |
The modifier for styling the composable. (Optional) | Modifier |
totalSteps |
The total number of steps in the horizontal sequenced stepper. | - |
currentStep |
The current step that is active. | 1 |
lineThickness |
The thickness of the connecting line between steps. | 1.dp |
stepSize |
The size of each step in the stepper. | 28.dp |
stepShape |
The shape of each step in the stepper. | CircleShape |
completedColor |
The color for completed steps. | Color.Blue |
incompleteColor |
The color for incomplete steps. | Color.Gray |
checkMarkColor |
The color of the checkmark symbol for completed steps. | Color.White |
stepTitleOnIncompleteColor |
The color of step titles on incomplete steps. | checkMarkColor |
stepTitleOnCompleteColor |
The color of step titles on completed steps. | completedColor |
stepNameOnIncompleteColor |
The color of step names on incomplete steps. | checkMarkColor |
stepNameOnCompleteColor |
The color of step names on completed steps. | completedColor |
stepDescription |
A list of step descriptions. The length should match totalSteps . |
List(totalSteps) { "" } |
- Horizontal Icons Stepper
HorizontalIconStepper(
totalSteps = 5,
currentStep = 1,
stepIconsList = listOf(
Icons.Default.AccountBox,
Icons.Default.AddCircle,
Icons.Default.Build,
Icons.Default.Face,
Icons.Default.Home
)
)
Parameter | Description | Default Value |
---|---|---|
modifier |
The modifier for styling the composable. (Optional) | Modifier |
totalSteps |
The total number of steps in the horizontal icon stepper. | - |
currentStep |
The current step that is active. | 1 |
lineThickness |
The thickness of the connecting line between steps. | 1.dp |
stepSize |
The size of each step in the stepper. | 28.dp |
stepShape |
The shape of each step in the stepper. | CircleShape |
completedColor |
The color for completed steps. | Color.Blue |
incompleteColor |
The color for incomplete steps. | Color.Gray |
checkMarkColor |
The color of the checkmark symbol for completed steps. | Color.White |
stepTitleOnIncompleteColor |
The color of step titles on incomplete steps. | checkMarkColor |
stepTitleOnCompleteColor |
The color of step titles on completed steps. | completedColor |
stepDescription |
A list of step descriptions. The length should match totalSteps . |
List(totalSteps) { "" } |
stepIconsList |
A list of ImageVectors representing icons for each step. | - |
stepIconsColorOnIncomplete |
The color of step icons on incomplete steps. | checkMarkColor |
stepIconsColorOnComplete |
The color of step icons on completed steps. | incompleteColor |
showCheckMarkOnDone |
Whether to display a checkmark icon for completed steps. | false |
- Vertical Sequenced Stepper
VerticalSequencedStepper(
totalSteps = 5,
currentStep = 1
)
Parameter | Description | Default Value |
---|---|---|
modifier |
The modifier for styling the composable. (Optional) | Modifier |
totalSteps |
The total number of steps in the vertical sequenced stepper. | - |
currentStep |
The current step that is active. | 0 |
lineThickness |
The thickness of the connecting line between steps. | 1.dp |
stepSize |
The size of each step in the stepper. | 28.dp |
stepShape |
The shape of each step in the stepper. | CircleShape |
completedColor |
The color for completed steps. | Color.Blue |
incompleteColor |
The color for incomplete steps. | Color.Gray |
checkMarkColor |
The color of the checkmark symbol for completed steps. | Color.White |
stepTitleOnIncompleteColor |
The color of step titles on incomplete steps. | checkMarkColor |
stepTitleOnCompleteColor |
The color of step titles on completed steps. | completedColor |
stepNameOnIncompleteColor |
The color of step names on incomplete steps. | checkMarkColor |
stepNameOnCompleteColor |
The color of step names on completed steps. | completedColor |
stepDescription |
A list of step descriptions. The length should match totalSteps . |
List(totalSteps) { "" } |
- Vertical Icon Stepper
VerticalIconStepper(
totalSteps = 5,
currentStep = 1,
stepIconsList = listOf(
Icons.Default.AccountBox,
Icons.Default.AddCircle,
Icons.Default.Build,
Icons.Default.Face,
Icons.Default.Home
)
)
Parameter | Description | Default Value |
---|---|---|
modifier |
The modifier for styling the composable. (Optional) | Modifier |
totalSteps |
The total number of steps in the vertical icon stepper. | - |
currentStep |
The current step that is active. | 0 |
lineThickness |
The thickness of the connecting line between steps. | 1.dp |
stepSize |
The size of each step in the stepper. | 28.dp |
stepShape |
The shape of each step in the stepper. | CircleShape |
completedColor |
The color for completed steps. | Color.Blue |
incompleteColor |
The color for incomplete steps. | Color.Gray |
checkMarkColor |
The color of the checkmark symbol for completed steps. | Color.White |
stepTitleOnIncompleteColor |
The color of step titles on incomplete steps. | checkMarkColor |
stepTitleOnCompleteColor |
The color of step titles on completed steps. | completedColor |
stepIconsList |
A list of ImageVectors representing icons for each step. | - |
stepIconsColorOnIncomplete |
The color of step icons on incomplete steps. | checkMarkColor |
stepIconsColorOnComplete |
The color of step icons on completed steps. | incompleteColor |
stepDescription |
A list of step descriptions. The length should match totalSteps . |
List(totalSteps) { "" } |
showCheckMarkOnDone |
Whether to display a checkmark icon for completed steps. | false |
If you encounter any issues or have feature requests, please create a new issue in this repository.
Support it by joining stargazers for this repository. ⭐
Also follow me for my next creations! 🤩
---
Copyright 2023 binayshaw7777
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.