KotStep

KO | EN

gitlite — search

#python #nodejs #java #javascript #android #hacktoberfest #cli #django #docker #microservice #game #documentation

★ 317 Open GitHub ↗

💜 An easy to use Stepper UI library for Jetpack Compose

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">KotStep</h1>

💜 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.
 
 
<img src="https://github.com/binayshaw7777/KotStep/assets/62587060/2cf2c41a-6812-484a-bcdc-d5f72cad94f0"/>

## Note: If you're using KotStep v3 then please checkout the new docs: [Documentation](https://github.com/binayshaw7777/KotStep/wiki/KotStep-Docs-(v3))

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

[![](https://jitpack.io/v/binayshaw7777/kotstep.svg)](https://jitpack.io/#binayshaw7777/kotstep)
![Downloads](https://jitpack.io/v/binayshaw7777/KotStep/month.svg)

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:

<details>
<summary>Kotlin</summary>

```kotlin
dependencies {
 implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
```
</details>

<details>
<summary>Groovy</summary>

```kotlin
dependencies {
 implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}
```
</details>

#### Please checkout KotStep v3 Docs if you've migrated the version to KotStep 3.0.0 and above: [KotStep V3 Docs](https://github.com/binayshaw7777/KotStep/wiki/KotStep-Docs-(v3))

# Usage

## Horizontal Stepper - Tab

```kotlin
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](https://github.com/binayshaw7777/KotStep/assets/62587060/595c1c2a-dd51-478b-9398-f46ac4725b28)

---

## Horizontal Stepper - Icon

```kotlin
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](https://github.com/binayshaw7777/KotStep/assets/62587060/67df5304-dd3c-45f4-b631-5f05440fe429)

---

## Horizontal Stepper - Numbered

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

### `numberedHorizontal` Parameters

Example: 
![Horizontal Stepper - Numbered](https://github.com/binayshaw7777/KotStep/assets/62587060/44b36c90-5321-4111-afac-bf8c609c2452)

---

## Horizontal Stepper - Dashed

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

### `dashed` Parameters

Example: 
![Horizontal Stepper - Dashed](https://github.com/binayshaw7777/KotStep/assets/62587060/df826be7-ecb2-4944-8fcc-7726190a03b1)

---

## Vertical Stepper - Tab

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

### `tabVertical` Parameters

Example: 
![Vertical Stepper - Tab](https://github.com/binayshaw7777/KotStep/assets/62587060/d875ce8f-b8a3-4941-8c16-50c866071374)

---

## Vertical Stepper - Tab with Label

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

### `tabVerticalWithLabel` Parameters

Example: 
![Vertical Stepper - Tab with Label](https://github.com/user-attachments/assets/31f99b69-01fa-49a9-9ee8-df7d85addf11)

---

## Vertical Stepper - Icon

```kotlin
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](https://github.com/binayshaw7777/KotStep/assets/62587060/adc67265-8325-4297-a856-dfe088d7650d)

---

## Vertical Stepper - Icon with label

```kotlin
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](https://github.com/user-attachments/assets/9aa2968f-11f9-414e-bde9-af9f6ac91324)

---

## Vertical Stepper - Numbered

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

### `numberedVertical` Parameters

Example: 
![Vertical Stepper - Numbered](https://github.com/binayshaw7777/KotStep/assets/62587060/b79afbef-4f9d-4942-a0db-23003c956a8e)

---

## Vertical Stepper - Numbered with Label

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

### `numberedVerticalWithLabel` Parameters

Example: 
![Vertical Stepper - Numbered](https://github.com/user-attachments/assets/0d3de86b-e56c-4e4f-8f4c-21d42181699d)

## `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](https://github.com/binayshaw7777/KotStep/issues) in this repository.

## Supporting KotStep :heart:
Support it by joining __[stargazers](https://github.com/binayshaw7777/KotStep/stargazers)__ for this repository. :star: 
Also __[follow](https://github.com/binayshaw7777)__ me for my next creations! 🤩

[![Star History Chart](https://api.star-history.com/svg?repos=binayshaw7777/KotStep&type=Date)](https://star-history.com/#binayshaw7777/KotStep&Date)

---

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

KotStep

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README