A custom View for a step-by-step process (order checkout, app first launch, intro, timeline visualization). The StepView displays the name of the step and an icon associated with the state of the step (completed, currently active, not completed).
StepView Demo app is available on Google Play Store. APKs are also available under releases.
Default
Customized
Default (reverse order)
Default (forward order)
-
Add
jitpack.ioto your root build.gradle file.repositories { .. maven { url "https://jitpack.io" } } -
Add StepView as a dependency in your module build.gradle
dependencies { implementation 'com.github.vinaygopinath:StepView:2.0.1' }
<com.vinay.stepview.HorizontalStepView
android:id="@+id/horizontal_step_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- OR -->
<com.vinay.stepview.VerticalStepView
android:id="@+id/vertical_step_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
HorizontalStepView horizontalStepView = findViewById(R.id.horizontal_step_view);
List<Step> stepList = new ArrayList<>();
stepList.add(new Step("Lorem", Step.State.COMPLETED));
stepList.add(new Step("Ipsum", Step.State.COMPLETED));
stepList.add(new Step("Dolor", Step.State.CURRENT));
stepList.add(new Step("Sit")); // State defaults to NOT_COMPLETED
stepList.add(new Step("Amet")); // State defaults to NOT_COMPLETED
horizontalStepView.setSteps(stepList);horizontalStepView // Also applies to VerticalStepView
// Drawables
.setCompletedStepIcon(AppCompatResources.getDrawable(getContext(), R.drawable.ic_custom_completed))
.setNotCompletedStepIcon(AppCompatResources.getDrawable(getContext(), R.drawable.ic_custom_not_completed))
.setCurrentStepIcon(AppCompatResources.getDrawable(getContext(), R.drawable.ic_custom_current))
// Text colors
.setCompletedStepTextColor(Color.DKGRAY) // Default: Color.WHITE
.setNotCompletedStepTextColor(Color.DKGRAY) // Default: Color.WHITE
.setCurrentStepTextColor(Color.BLACK) // Default: Color.WHITE
// Line colors
.setCompletedLineColor(Color.parseColor("#ea655c")) // Default: Color.WHITE
.setNotCompletedLineColor(Color.parseColor("#eaac5c")) // Default: Color.WHITE
// Text size (in sp)
.setTextSize(15) // Default: 14sp
// Drawable radius (in dp)
.setCircleRadius(15) // Default: ~11.2dp
// Length of lines separating steps (in dp)
.setLineLength(50); // Default: ~34dp
verticalStepView
.setReverse(false); // Default: trueList<Step> stepList = new ArrayList<>();
stepList.add(new Step("Lorem", Step.State.CURRENT));
stepList.add(new Step("Ipsum"));
stepList.add(new Step("Dolor"));
// Set steps
mHorizontalStepView.setSteps(stepList);
// Complete the first step and set the second step as currently active
mHorizontalStepView.setStepState(Step.State.COMPLETED, 0);
mHorizontalStepView.setStepState(Step.State.CURRENT, 1);
// OR update the List and call setSteps again
stepList.get(0).setState(Step.State.COMPLETED);
stepList.get(1).setState(Step.State.CURRENT);
mHorizontalStepView.setSteps(stepList);
// OR provide a new step to replace the step at a position
Step updatedStep = new Step("Updated Step Text", Step.State.CURRENT);
mHorizontalStepView.setStep(updatedStep, 0);This repo is a fork of baoyachi's StepView, which is based on anton46's Android-StepsView