A feature rich staged progress bar with modifiable steps in between its stages.

Overview

StageStepBar

License Jetpack Compose

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

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

">
<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).

XML attribute Default Description
ssb_stageStepConfig "1" This is a list in a string form that describes the steps per stages. For example a value of 6,4,3 means 6 steps from stage 0 to 1, 4 from stage 1 to 2 and 3 steps from stage 2 to 3.

In code: setStageStepConfig(List)
ssb_currentState null This is a list in a string form that describes the current state. For example a value of 2,4 means go to stage 2, step 4. Both the stage and the step provided here are coerced to the largest possible value (according to stageStepConfig). A null value here means that nothing is filled.

In code: setCurrentState(State?)
ssb_animate true Whether or not the progress change will animate.

In code: setAnimate(Boolean)
ssb_animationDuration 500 The duration of the animation

In code: setAnimationDuration(Long)
ssb_orientation horizontal Whether the bar is horizontal or vertical.

In code: setOrientation(Orientation)
ssb_horizontalDirection auto The direction of the bar if it is horizontal. Possible values: auto (based on locale). ltr, rtl.

In code: setHorizontalDirection(HorizontalDirection)
ssb_verticalDirection btt The direction of the bar if it is vertical. Possible values: ttb (Top to Bottom). btt, (Bottom to Top).

In code: setVerticalDirection(VerticalDirection)
ssb_filledTrackColor #000000 The color of the track when it is filled.

In code: setFilledTrackToNormalShape(@ColorInt Int)
ssb_unfilledTrackColor #A9A9A9 The color of the track when it is not filled.

In code: setUnfilledTrackToNormalShape(@ColorInt Int)
ssb_filledThumbColor #000000 The color of the thumbs when they are filled.

In code: setFilledThumbToNormalShape(@ColorInt Int)
ssb_unfilledThumbColor #6F6F6F The color of the thumbs when they are not filled.

In code: setUnfilledThumbToNormalShape(@ColorInt Int)
ssb_filledTrackDrawable - Sets a custom drawable to the filled track.

In code: setFilledTrackToCustomDrawable(Drawable)
ssb_unfilledTrackDrawable - Sets a custom drawable to the unfilled track.

In code: setUnfilledTrackToCustomDrawable(Drawable)
ssb_filledThumbDrawable - Sets a custom drawable to the filled thumbs.

In code: setFilledThumbToCustomDrawable(Drawable)
ssb_unfilledThumbDrawable - Sets a custom drawable to the unfilled thumbs.

In code: setUnfilledThumbToCustomDrawable(Drawable)
ssb_thumbSize 20dp The size of the thumbs (both filled and unfilled).

In code: setThumbSize(Int) Value is expected to be in pixels.
ssb_crossAxisFilledTrackSize 6dp The height of the filled track if the bar is horizontal or its width if it is vertical.

In code: setCrossAxisFilledTrackSize(Int) Value is expected to be in pixels.
ssb_crossAxisUnfilledTrackSize 6dp The height of the unfilled track if the bar is horizontal or its width if it is vertical.

In code: setCrossAxisUnfilledTrackSize(Int) Value is expected to be in pixels.
ssb_showThumbs true Whether or not to show the thumbs.

In code: setThumbsVisible(Boolean)

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.

You might also like...
A customizable indeterminate progress bar
A customizable indeterminate progress bar

DilatingDotsProgressBar Installation compile 'com.github.justzak:dilatingdotsprogressbar:1.0.1' Usage com.zl.reik.dilatingdotsprogressbar.DilatingDo

Open source android library for different progress bar designs
Open source android library for different progress bar designs

MultiProgressBar A progress bar library for Android that provides customized progress bars. Built with ❀︎ by Aseem Khare πŸ’» Installation Add this in y

Arc pointer - simple customized progress bar in the form of an arch
Arc pointer - simple customized progress bar in the form of an arch

ArcPointer Simple customized progress bar in the form of an arch Demo Quick start Step 1 Gradle: compile 'io.github.dvegasa:arcpointer:1.0.2' Maven:

MusicBar 2.1 0.0 Java view visualize progress bar for sound file like sound cloud
MusicBar 2.1 0.0 Java view visualize progress bar for sound file like sound cloud

MusicBar Setup dependencies { implementation 'com.oze.music:MusicBar:1.0.5' } Usage Function Description setAnimationChangeListener(OnMusicBarAn

Progress Bar in the shape of regular polygon.
Progress Bar in the shape of regular polygon.

N-SidedProgressBar Progress Bar in the shape of regular polygon. Download The library is available on jcenter. Just add the dependency to your build.g

a circle progress bar with effect
a circle progress bar with effect

RingProgress a circle progress bar with effect #Preview ##Usage xml com.ldoublem.ringPregressLibrary.RingProgress android:id="@+id/ring_prog

An android library to easily add circular progress bar into your Jetpack Compose apps.
An android library to easily add circular progress bar into your Jetpack Compose apps.

CircularProgressBar for Jetpack Compose An android library to easily add circular progress bar into your Jetpack Compose apps. Have a Look Usage Circu

An instagram-like segmented progress bar
An instagram-like segmented progress bar

An instagram-like segmented progress bar

Sector progress bar with kotlin
Sector progress bar with kotlin

SectorProgressBar Sector progress bar You can visually see the use of this libra

Comments
  • Problem with 1.0.0 version

    Problem with 1.0.0 version

    Seems like 'com.loukwn.stagestepbar_compose.data' is not added in the aar library or got obfuscated. Didn't have this issue with the previous library.

    opened by Vivecstel 3
Releases(1.0.1)
  • 1.0.1(Mar 26, 2022)

  • 1.0.0(Mar 8, 2022)

    Changelog

    View Version

    • feat: Can now specify "null" as state in XML.
    • fix: Can now animate properly from and to a null state.
    • fix: Got rid of leftover artifacts when view was changing size (size of thumbs and/or tracks).
    • fix: Issue when drawing in reverse (Right To Left and Top To Bottom) when in null state that was causing the track to not show at all.

    Compose Version

    • feat: Supports now drawTracksBehindThumbs (more info on README in View configuration section).
    • fix: Can now animate properly from and to a null state.

    Other

    • Cleaned up examples
    • Added snapshot testing
    Source code(tar.gz)
    Source code(zip)
  • 0.3.2(Jan 11, 2022)

    Changelog

    View Version

    • fix: Should now properly redraw after changing the paint of the unfilledTrack
    • fix: Various fixes around showing semi transparent colored DrawnComponents
    Source code(tar.gz)
    Source code(zip)
  • 0.3.1(Jan 11, 2022)

    Changelog

    View Version

    • Use correct PorterDuff for filledTrackPaint so that the two tracks do not blend. (might need to change that in the future)
    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Jan 11, 2022)

    Changelog

    View Version

    • Filled and Unfilled tracks should have the same cross axis size
    • There is now an option to not draw the tracks behind the thumbs, so that semi transparent thumbs do not overlap with them. (drawTracksBehindThumbs)
    Source code(tar.gz)
    Source code(zip)
  • 0.2.3(Jan 11, 2022)

  • 0.2.2(Jan 11, 2022)

    Changelog

    View Version

    • Changing any of the DrawnComponents while animating, does not cause the animation to pause and restart
    • Refactor the LifecycleObserver to be completely private inside the library
    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Dec 22, 2021)

    Changelog

    Compose Version

    • Added the ability to specify an ColorFilter on UserProvided Drawables

    View Version

    • Added the ability to apply alpha to a UserProvided Drawable

    Other

    • Some code refactoring
    Source code(tar.gz)
    Source code(zip)
Owner
Konstantinos Lountzis
Konstantinos Lountzis
IOSProgressBar is a progress-bar lib for android. And the progress-bar looks like iOS system style

IOSProgressBar is a progress-bar lib for android. And the progress-bar looks like iOS system style

heyangyang 6 Aug 25, 2022
A progress wheel for android, intended for use instead of the standard progress bar.

Deprecation warning This project is no-longer maintained, and has not been maintained for a few years now. If you're looking for an alternative librar

Todd Davies 2.7k Dec 29, 2022
:barber: [Android Library] Stacked dual progress indicator progress-bar

StackedHorizontalProgressBar Specs Featured in Show some ❀️ Android library with ability to show two progress indicators in one horizontal progress ba

Nishant Srivastava 98 Nov 11, 2022
[Android] Round Corner Progress Bar Library for Android

RoundCornerProgressBar Round corner is cool. Let's make your progress bar to round corner Colorful progress bar with round corner on progress which yo

Akexorcist 2.3k Dec 31, 2022
This is beautiful color arc progress bar.

ColorArcProgressBar δΈ­ζ–‡η‰ˆ This is a customizable circular progressbar.It can achieve the effect of the QQ health's arc progress with XML. What's more, w

PASSION 928 Dec 6, 2022
A customizable, animated progress bar that features rounded corners. This Android library is designed to look great and be simple to use πŸŽ‰

RoundedProgressBar Easy, Beautiful, Customizeable The RoundedProgressBar library gives you a wide range of customizable options for making progress ba

null 541 Jan 1, 2023
[Android] Round Corner Progress Bar Library for Android

RoundCornerProgressBar Round corner is cool. Let's make your progress bar to round corner Colorful progress bar with round corner on progress which yo

Akexorcist 2.3k Jan 7, 2023
A wave view of android,can be used as progress bar.

WaveView ![Gitter](https://badges.gitter.im/Join Chat.svg) A wave view of android,can be used as progress bar. Screenshot APK demo.apk What can be use

Kai Wang 1.3k Dec 28, 2022
DownloadProgressBar is an android library that delivers awesome custom progress bar. You can manipulate it's state in every way.

Download Progress Bar Android progress bar with cool animation, inspired by : https://dribbble.com/shots/2012292-Download-Animation ###Attributes Attr

Mariusz Brona 978 Nov 10, 2022
Android - An action bar item which acts both as a refresh button and as a progress indicator

RefreshActionItem An action bar item that implements this common pattern: Initially it shows a refresh button. If the button is clicked, a background

Manuel Peinado Gallego 655 Nov 10, 2022