Display steps along with the status/description written in kotlin

by androidexample

StepViewAndroid

An Android library written in kotlin to display steps (without any max-min limits) along with the status/description. It also supports some really cool features.

Usage

A customised StepView

  • Set step count and current count.

  • Set different dimensions for circle radius, line length, line gap, stroke width, line width, text size of label (step count).

  • Set status data using android:entries

  • Chose a color mode i.e fill, stroke or both using circleColorType

  • Stroke color (circle), fill color (circle), line color & label text color can be set differently for completed, current & incomplete states.

<params.com.statusView.StatusViewScroller
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:stepCount="5"
    app:currentCount="4"
    app:drawLabels="true"
    android:entries="@array/status"
    app:circleColorType="fillStroke"
    app:lineGap="5dp"
    app:lineWidth="3dp"
    app:lineColor="@android:color/black"
    app:lineColorIncomplete="#B4B7BA"
    app:lineColorCurrent="#91A8D0"
    app:circleColor="#CC004B8D"
    app:circleColorCurrent="#004B8D"
    app:circleColorIncomplete="#BCBCBE"
    app:textColorLabels="@android:color/white"
    app:textColorLabelsCurrent="@android:color/white"
    app:textColorLabelsIncomplete="@android:color/black"
    app:circleStrokeWidth="4dp"
    app:circleStrokeColorCurrent="#91A8D0"
    app:textSizeLabels="15sp"
    app:completeDrawable="@drawable/ic_done_black_24dp" />

Some more customisations

  • Set a zoom value to your current step
  • Set different drawables for completed, current & incomplete states.
    app:currentStepZoom="0.5"
    app:completeDrawable="@drawable/ic_satisfied_black_24dp"
    app:currentDrawable="@drawable/ic_dissatisfied_black_24dp"
    app:incompleteDrawable="@drawable/ic_very_dissatisfied_black_24dp"

Step status customisations

  • Multiline Text Support: View automatically adjusts line length to make sure words or alphabets from one line do not crossover to next line.
    However, If you want to strictly obey line length set app:strictObeyLineLength= "true".
  • To add font to status simply refer to the font file from res/font directory.
  • Ensure a minimum margin between status texts in case they are too close.
  • Set top margin of a status text from its corresponding circle.
  • Align all status at the same level in case, a zoom level is set to current step.
  • Set text color to status.
    app:currentStepZoom="0.3"
    app:statusFont="@font/lekton_r"
    app:statusTopMargin="15dp"
    app:minStatusAdjacentMargin="5dp"
    app:alignStatusWithCurrent="true"
    app:textColorStatus="#000000"

Scrolling property

  • The view can be scrolled if the content exceeds the available width.
  • You can also scroll to a particular step by calling statusViewScroller.scrollToStep(stepCount)

GitHub