KotStep

💜 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

• Multiple stepper styles:
  • Horizontal Numbered Stepper
  • Horizontal Tab Stepper
  • Horizontal Icon Stepper
  • Horizontal Dashed Stepper
  • Vertical Icon Stepper
  • Vertical Tab Stepper
  • Vertical Numbered Stepper
  • Vertical Icon Stepper with Label
  • Vertical Tab Stepper with Label
  • Vertical Numbered Stepper with Label
• Easy integration with Jetpack Compose
• Optional checkmark icons for completed steps.
• Highly customizable appearance and behavior

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 Stepper - Tab

HorizontalStepper(
    style = tabHorizontal(
        totalSteps = 3,
        currentStep = 1
    )
) {
	// Do something...
}

tabHorizontal Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Horizontal Stepper - Icon

HorizontalStepper(
    style = iconHorizontal(
	currentStep = 1,
        icons = listOf(
            Icons.Default.AccountCircle,
	    ...
            Icons.Default.DateRange
        )
    )
) {
	// Do something...
}

iconHorizontal Parameters

Parameter	Description	Default Value
icons	A list of ImageVectors.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Horizontal Stepper - Numbered

HorizontalStepper(
  style = numberedHorizontal(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}      

numberedHorizontal Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Horizontal Stepper - Dashed

HorizontalStepper(
  style = dashed(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}    

dashed Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Tab

VerticalStepper(
  style = tabVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
} 

tabVertical Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Tab with Label

VerticalStepper(
  style = tabVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}

tabVerticalWithLabel Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Icon

VerticalStepper(
  style = iconVertical(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      ...
      Icons.Default.DateRange
    )
  )
) {
	// Do something...
}    

iconVertical Parameters

Parameter	Description	Default Value
icons	A list of ImageVectors.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Icon with label

VerticalStepper(
  style = iconVerticalWithLabel(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      Icons.Default.DateRange
    ),
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}    

iconVerticalWithLabel Parameters

Parameter	Description	Default Value
icons	A list of ImageVectors.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Numbered

VerticalStepper(
  style = numberedVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}    

numberedVertical Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

---

Vertical Stepper - Numbered with Label

VerticalStepper(
  style = numberedVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}    

numberedVerticalWithLabel Parameters

Parameter	Description	Default Value
totalSteps	The total number of steps.	-
currentStep	The current step that is active.	-
stepStyle	The style for the step numbers. (Optional)	StepStyle()
onStepClick	Returns the index of the step clicked. (Optional)	{}

Example:

StepStyle Parameters

Property	Data Type	Default Value	Description
colors	StepDefaults	StepDefaults.defaultColors()	Colors for the step indicator
stepSize	Dp	36.dp	Size of the step indicator
stepShape	Shape	CircleShape	Shape of the step indicator
textSize	TextUnit	16.sp	Text size for the step indicator
iconSize	Dp	24.dp	Icon size for the step indicator
lineThickness	Dp	6.dp	Thickness of the line connecting steps
lineSize	Dp	20.dp	Length of the line connecting steps
stepPadding	Dp	0.dp	Padding around the step indicator
lineStyle	LineStyle	LineStyle.SOLID	Style of the line connecting steps (SOLID, DASHED, DOTTED)
showCheckMarkOnDone	Boolean	true	Whether to show a checkmark on completed steps
showStrokeOnCurrent	Boolean	true	Whether to show a stroke around the current step
strokeCap	StrokeCap	StrokeCap.Square	Style of the ends of the line connecting steps (ROUNDED, SQUARE)

---

Reporting Issues and Requesting Features✨

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

Supporting KotStep ❤️

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.