StepBarView

Additional

Language
Kotlin
Version
1.1.0 (Nov 24, 2018)
Created
Apr 5, 2018
Updated
Sep 28, 2022 (Retired)
Owner
Iman Khoshabi (imaNNeo)
Contributors
Julio Andres (juliooa)
Abhi (AbhiSNSoft)
Yanuarizal Kurnia (yanuarizalk)
Iman Khoshabi (imaNNeo)
4
Activity
Badge
Generate
Download
Source code

Step Bar View

You can use this library to have a step bar.

It can be used in pages that you have some steps to reach.

You can download the Demo apk file (you can first adjust your StepBar in the demoApp and then implement it in code).

1 - Getting Started

By these instructions you can add this library and I will explain how to use it.

Add Maven to your root build.gradle

First of all add it in your root build.gradle at the end of the repositories:

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

Add Dependency

Add the dependency to your app build.gradle file.

dependencies
{
    implementation  'com.github.imaNNeoFighT:StepBarView:1.1.0'
    // Or in older versions : 
    // compile'com.github.imaNNeoFighT:StepBarView:1.1.0'
}

And then sync your gradle and have a cup of tea.

2 - About The View

You can simply use this View like other Views in android, just add StepBarView in your java code or xml.

View Properties

You can customize StepBarView. All of this attributes can be changed via xml or code (runtime).

Attribute Type Kotlin Description
sbv_max_count Integer maxCount your steps count (max to reach), default value is 8
sbv_steps_reached_colors Color stepsReachedColor steps reached color (steps circle reached color)
sbv_steps_unreached_colors Color stepsUnreachedColor steps unReached color (steps circle default color)
sbv_steps_line_reached_colors Color stepsLineReachedColor steps line reached color
sbv_steps_line_unreached_colors Color stepsLineUnreachedColor steps line uReached color
sbv_steps_line_height Dimensions stepsLineHeight steps line height, default value is 4dp
sbv_steps_size Dimensions stepsSize steps circle size, default value is 16dp
sbv_steps_text_color Color stepsTextColor steps text color (number that drawn on steps circle)
sbv_steps_text_size Dimensions stepsTextSize steps text size, default is 14sp
sbv_steps_line_margin_left Dimensions stepsLineMarginLeft steps line margin left (gap in left of lines), default value is 2dp
sbv_steps_line_margin_right Dimensions stepsLineMarginRight steps line margin right (gap in right of lines), default value is 2dp
sbv_allow_touch_step_to Integer allowTouchStepTo allow touch to reach step (for example if you set 3 you can touch to reach step to 3 and not more), default value is 8
sbv_show_step_index Boolean showStepIndex you can set this property false to prevent showing indexes (then just a solid circle will be drawn), default value is true
sbv_steps_stroke_size Dimensions stepsStrokeSize Stroke Size of steps , default value is 2dp
sbv_steps_stroke_reached_color Color stepsStrokeReachedColor Stroke color of reached steps
sbv_steps_stroke_unreached_color Color stepsStrokeUnReachedColor Stroke color of unReached steps
sbv_steps_stroke_current_color Color stepsStrokeCurrentColor Stroke color of current steps
sbv_show_step_stroke Boolean showStepStroke flag to showing the Stroke or not!, default is false
sbv_is_rtl Boolean isRtl flag to showing steps in RTL (Right to left), default is false
sbv_show_step_name Boolean showStepName flag to show title below the steps, default is false
sbv_is_fixed_steps_line_width Boolean isFixedStepsLineWidth flag to specify that the line widths is fixed or it should calculate depends on View width (use it when you want to achieve scrollable view)
sbv_steps_line_width Dimensions stepsLineWidth steps line width, default value is 24dp, it will ignored when isFixedStepsLineWidth is false

3 - Some Samples

Scrollable Sample

To achieve scrollable View just set isFixedStepsLineWidth : true, and put this view inside a HorizontalScrollView,

just like this:

<HorizontalScrollView
        android:id="@+id/stepBar3Container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/my_stepBarView2"
        app:layout_constraintBottom_toTopOf="@+id/my_stepBarView4"
        android:scrollbarSize="0dp"
        >

        <ir.neo.stepbarview.StepBarView
            android:id="@+id/my_stepBarView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:sbv_steps_size="28dp"
            app:sbv_steps_reached_colors="#fff"
            app:sbv_steps_line_reached_colors="#fff"
            app:sbv_steps_line_unreached_colors="#dbcecece"
            app:sbv_steps_unreached_colors="#dbcecece"
            app:sbv_steps_text_color="#f0f"
            app:sbv_max_count="15"
            android:paddingLeft="24dp"
            android:paddingRight="24dp"
            android:background="#f0f"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            app:sbv_is_fixed_steps_line_width="true"
            app:sbv_steps_line_width="80dp"
            />

</HorizontalScrollView>

License

Copyright 2018 Iman Khoshabi

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.