Skip to content

haytham-c01/rectangular-step-view

Repository files navigation

Rectangular Step view

A highly customizeable step view, where you can change

  1. inital step
  2. current step
  3. height & width
  4. border color & size
  5. active color

Example


    <com.haytham.coder.stepview.RectangularStepView
        android:id="@+id/stepView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"/>

    <com.haytham.coder.stepview.RectangularStepView
        android:id="@+id/stepView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:activeColor="@android:color/holo_red_light"
        app:borderColor="@android:color/holo_orange_light"
        android:layout_marginBottom="24dp"/>


    <com.haytham.coder.stepview.RectangularStepView
        android:id="@+id/stepView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:activeColor="@android:color/holo_red_light"
        app:borderColor="@android:color/holo_orange_light"
        app:stepsCount="6"
        app:initialStep="2"
        app:stepViewStrokeWidth="4dp"
        android:layout_marginBottom="150dp" />


    <com.haytham.coder.stepview.RectangularStepView
        android:id="@+id/stepView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:initialStep="1"
        app:heightToWidthRatio="0.05"/>


    <com.haytham.coder.stepview.RectangularStepView
        android:id="@+id/stepView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:activeColor="@android:color/holo_red_light"
        app:borderColor="@android:color/holo_orange_light"
        app:stepsCount="6"
        app:initialStep="2"
        app:stepViewStrokeWidth="4dp"
        app:heightToWidthRatio="0.20"
        android:layout_marginBottom="150dp" />

Installation

  1. Add maven to project-level gradle file
allprojects {
    repositories {
        google()
        jcenter()

        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency in your module-level gradle file
dependencies {
...
implementation 'com.github.haytham-c01:RectangularStepView:LATEST_RELEASE'
}

Attributes

Name Description Type Default Value
initialStep the default active step integer [0 - (stepsCount-1)] 0
stepsCount number of steps in the view integer [at least 2] 3
borderColor color of view border color Black
activeColor color of the active step color Green
stepViewStrokeWidth width of the shape border dimension [at least 0] 1dp
heightToWidthRatio the percentage of view height
in respect to its width
float [0.01f - 0.2f] 0.08f

Code Guide

1- Increment by one step

stepView.incrementStep()

2- Decrement by one step

stepView.decrementStep()

3- Goto step

val stepNumber= 4
stepView.gotoStep(stepNumber)

4- Listen to step changes

stepView.onStepChangedListener = {
    previousStep, currentStep ->
    // do something
 }

License

Copyright 2013 Square, Inc.

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.