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

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

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

Usage

Usage as a View

In XML:

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

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<Float> effectively taking advantage of other kinds of animations like spring() etc.
• Instead of passing a Drawable, in Compose one will need to either pass an ImageBitmap (because of what the Canvas in this case expects) or just a @DrawableRes for convenience. There is also an option to pass a ColorFilter so that things like tinting can be done.

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.