Android, Setting Up StepView with Icon Support: A Technical Guide

After extensive research, I found myself between a rock and a hard place as I could not find a stepview library that supports icons and so shuhart/StepView: A simple animated step view for Android (github.com) came closest to solving my usecase. StepView is a versatile Android library that facilitates the implementation of animated step views with backward and forward animations.

I set out to customize the library to meet my usecase as above library was deprecated. Re-engineered version with icon support can be found here: github.com/malcolmmaima/StepView

In this guide, we’ll explore the process of setting up StepView with icon support, allowing for a more visually appealing and informative user experience.

Example use case in production:

Prerequisites

Before integrating StepView into your Android project, ensure that you have the following prerequisites:

1. Android Studio installed.
2. A basic understanding of Android development and Gradle.

Integration Steps

Step 1: Clone the StepView Library

As the modified StepView library is not available on Maven Central, you’ll need to clone it from the GitHub repository (github.com/malcolmmaima/StepView) and add it to your project manually.

Step 2: Add StepView to Your Project

Once you’ve cloned the StepView library, add it to your Android Studio project by including the following in your project’s build.gradle file:

implementation project(':StepView')

Sync your project with Gradle to apply the changes.

Step 3: Add StepView to Layout

Include the StepView widget in your XML layout file:

<com.shuhart.stepview.StepView
    android:id="@+id/step_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    app:sv_selectedCircleColor="@color/colorAccent"
    app:sv_selectedTextColor="@color/colorAccent"
    app:sv_stepLineWidth="1dp"
    app:sv_stepPadding="4dp"
    app:sv_nextTextColor="@color/colorAccent"
    app:sv_nextStepLineColor="@color/colorAccent"
    app:sv_doneCircleColor="@color/colorAccent"
    app:sv_doneStepLineColor="@color/colorAccent"
    app:sv_doneCircleRadius="12dp"
    app:sv_selectedCircleRadius="12dp"
    app:sv_selectedStepNumberColor="@color/colorPrimary"
    app:sv_stepViewStyle="@style/StepView"
    app:sv_doneStepMarkColor="@color/colorPrimary"
    app:sv_stepNumberTextSize="12sp"
    app:sv_animationType="Line"
    app:sv_typeface="@font/roboto_italic"/>

Step 4: Define Steps and Icons

Specify the steps with the steps attribute in XML or programmatically with the setSteps method. Additionally, associate icons with each step using the stepsDrawable method.

XML:

app:steps="@array/steps"

Java:

List<String> steps = Arrays.asList("Step 1", "Step 2", "Step 3", "Step 4");
stepView.setSteps(steps);

List<Integer> stepIcons = Arrays.asList(
    R.drawable.ic_step1,
    R.drawable.ic_step2,
    R.drawable.ic_step3,
    R.drawable.ic_step4
);
stepView.stepsDrawable(stepIcons);

Kotlin:

Step 5: Customize Styling (Optional)

Adjust the appearance of the StepView by modifying the XML attributes or programmatically using the state builder. Customize attributes such as colors, text sizes, and animation types to match your app’s design.

Step 6: Handle Step Changes

You can programmatically navigate to a specific step using the go method. For example:

// Move to the second step with animation
stepView.go(1, true);

Step 7: Mark Steps as Done

Mark the last step as done using the done method. You can undo this action by setting it to false.

// Mark the last step as done
stepView.done(true);

// Undo the done mark
stepView.done(false);

Step 8: Step Click Listener

Implement a step click listener to respond to user interactions with steps.

stepView.setOnStepClickListener(new StepView.OnStepClickListener() {
    @Override
    public void onStepClick(int step) {
        // Handle step click event
    }
});

Conclusion

By following these steps, you can seamlessly integrate StepView with icon support into your Android application. This library is based off https://github.com/shuhart/StepView/ which doesn’t support icons.

Feel free to explore additional customization options and features offered by the StepView library to further tailor it to your application’s needs.