Skip to content

binayshaw7777/KotStep

Repository files navigation

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

  • 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

Downloads

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


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 - Icon


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 - Numbered


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:
Horizontal Stepper - Dashed


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


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 - Tab with Label


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


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 - Icon


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


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:
Vertical Stepper - Numbered

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! 🤩


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.