π Streamline your Android Jetpack Compose projects with a versatile step-by-step UI library.
π 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.
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:
dependencies {
implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
dependencies {
implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}
HorizontalSequencedStepper(
totalSteps = 5,
currentStep = 1
)
HorizontalSequencedStepper
ParametersParameter | 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) { "" } |
Example:
HorizontalIconStepper(
totalSteps = 5,
currentStep = 1,
stepIconsList = listOf(
Icons.Default.AccountBox,
Icons.Default.AddCircle,
Icons.Default.Build,
Icons.Default.Face,
Icons.Default.Home
)
)
HorizontalIconStepper
ParametersParameter | 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 |
Example:
VerticalSequencedStepper(
totalSteps = 5,
currentStep = 1
)
VerticalSequencedStepper
ParametersParameter | 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) { "" } |
Example:
VerticalIconStepper(
totalSteps = 5,
currentStep = 1,
stepIconsList = listOf(
Icons.Default.AccountBox,
Icons.Default.AddCircle,
Icons.Default.Build,
Icons.Default.Face,
Icons.Default.Home
)
)
VerticalIconStepper
ParametersParameter | 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 |
Example:
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. :star:
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.