StageStepBar

A staged progressbar that you can use if you want finer control of the steps in between its stages. You can customize:

• Number of steps between particular stages
• Look and feel of tracks and thumbs (stages)
• Direction and Orientation of the bar
• Animation speed (or even type in Compose)

Showcase

Best way to test how this library is configured is to check out:

• example module if you are interested in the View library.
• example-compose module if you are interested in the Compose library.

Installation

Add Jitpack distribution to the end of the repositories in your root build.gradle file.

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the relevant dependency to the list of dependencies in your module’s build.gradle file

<div class="highlight highlight-source-groovy position-relative" data-snippet-clipboard-copy-content="dependencies {
// Add only this one if you want to include the View version
implementation 'com.github.loukwn.StageStepBar:stagestepbar:’

// Add only this one if you want to include the Compose version
implementation ‘com.github.loukwn.StageStepBar:stagestepbar-compose:’
}
“>

dependencies {
    // Add only this one if you want to include the View version
    implementation 'com.github.loukwn.StageStepBar:stagestepbar:'

    // Add only this one if you want to include the Compose version
    implementation 'com.github.loukwn.StageStepBar:stagestepbar-compose:'
}

Usage

Usage as a View

In XML:

<div class="highlight highlight-text-xml position-relative" data-snippet-clipboard-copy-content="
“>

<com.loukwn.stagestepbar.StageStepBar
    android:id="@+id/stageStepBar"
    android:layout_width="200dp"
    android:layout_height="100dp"
    app:ssb_stageStepConfig="5,5,5"
    app:ssb_animationDuration="500"
    /*...*/
     />

In Code:

<div class="highlight highlight-source-kotlin position-relative" data-snippet-clipboard-copy-content="val stageStepBar = findViewById(R.id.stageStepBar)
stageStepBar.setStageStepConfig(listOf(6,2,7))

“>

val stageStepBar = findViewById<StageStepBar>(R.id.stageStepBar)
stageStepBar.setStageStepConfig(listOf(6,2,7))

Configuration

All XML attributes are optional (set to their defaults).

Note: Both thumbs and tracks can either have:

• A default shape but with the color specified by the user. Calling a set*ToNormalShape() function takes you to this state.
• Their entire look overriden by a custom Drawable. Calling a set*ToCustomDrawable() function takes you to this state.

Usage as a Composable

@Composable
fun Example() {
    StageStepBar(
        modifier = Modifier...,
        config = StageStepBarConfig(
            stageStepConfig = listOf(12,45,1)
            //...
        )
    )
}

The full configuration model is pretty much the same between the Compose and the View version. However there are differences (mostly due to things that Compose makes easier):

• Instead of specifying an Int in pixels for the sizes of thumbs and/or tracks, in the Compose version that is passed in Dp.
• Instead of just specifying a duration value for the animation, in the Compose version one can pass instead an AnimationSpec effectively taking advantage of other kinds of animations like spring() etc.
• Instead of passing a Drawable, in Compose one will need to pass an ImageBitmap (because of what the Canvas in this case expects).

These differences aside, the behavior between the two versions should be pretty much identical.

Licence

StageStepBar is available under MIT license. See LICENSE file for more information.

GitHub

https://github.com/loukwn/StageStepBar