KotStep Save

πŸ’œ Streamline your Android Jetpack Compose projects with a versatile step-by-step UI library.

Project README

KotStep

material API Kotlin Jetpack Compose Hits

πŸ’œ 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.

Features

  • 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.

Installation

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'
}

Usage

  • Horizontal Sequenced Stepper
HorizontalSequencedStepper(
    totalSteps = 5,
    currentStep = 1
)

HorizontalSequencedStepper Parameters

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) { "" }

Example:


  • 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
    )
)

HorizontalIconStepper Parameters

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

Example:


  • Vertical Sequenced Stepper
VerticalSequencedStepper(
    totalSteps = 5,
    currentStep = 1
)       

VerticalSequencedStepper Parameters

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) { "" }

Example:


  • 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
    )
)

VerticalIconStepper Parameters

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

Example:


Reporting Issues and Requesting Features✨

If you encounter any issues or have feature requests, please create a new issue in this repository.

Supporting KotStep :heart:

Support it by joining stargazers for this repository. :star:
Also follow me for my next creations! 🀩


Star History Chart


---
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.
Open Source Agenda is not affiliated with "KotStep" Project. README Source: binayshaw7777/KotStep

Open Source Agenda Badge

Open Source Agenda Rating