StepView

A simple animated step view for Android. Backward and forward animations is supported.

Usage

  1. Add jcenter() to repositories block in your gradle file.
  2. Add implementation 'com.shuhart.stepview:stepview:1.2.6' to your dependencies.
  3. Add StepView into your layouts or view hierarchy.

Supported animations:

Name Preview
ANIMATION_LINE animation_line
ANIMATION_CIRCLE animation_circle
ANIMATION_ALL animation_all
ANIMATION_NONE animation_none

In ANIMATION_CIRCLE and ANIMATION_NONE examples the line color remains the same. You can achieve this by specifying:
app:doneStepLineColor="@color/stepview_line_next"

Usage:

Specify steps with xml attribute:

	app:steps="@array/steps"
XML
	stepView.setSteps(List<String> steps);
Java

Or Specify numbers of steps so that only circles with step number are shown:

	app:stepsNumber="4"
XML
	stepView.setStepsNumber(4);
Java

no_text

Styling:

<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"/>
XML

or instantiate and setup it in runtime with handy state builder:

    stepView.getState()
            .selectedTextColor(ContextCompat.getColor(this, R.color.colorAccent))
            .animationType(StepView.ANIMATION_CIRCLE)
            .selectedCircleColor(ContextCompat.getColor(this, R.color.colorAccent))
            .selectedCircleRadius(getResources().getDimensionPixelSize(R.dimen.dp14))
            .selectedStepNumberColor(ContextCompat.getColor(this, R.color.colorPrimary))
            // You should specify only stepsNumber or steps array of strings.
            // In case you specify both steps array is chosen.
            .steps(new ArrayList<String>() {{
                add("First step");
                add("Second step");
                add("Third step");
            }})
            // You should specify only steps number or steps array of strings.
            // In case you specify both steps array is chosen.
            .stepsNumber(4)
            .animationDuration(getResources().getInteger(android.R.integer.config_shortAnimTime))
            .stepLineWidth(getResources().getDimensionPixelSize(R.dimen.dp1))
            .textSize(getResources().getDimensionPixelSize(R.dimen.sp14))
            .stepNumberTextSize(getResources().getDimensionPixelSize(R.dimen.sp16))
            .typeface(ResourcesCompat.getFont(context, R.font.roboto_italic))
            // other state methods are equal to the corresponding xml attributes
            .commit();
Java

If you want to mark last step with a done mark:

	stepView.done(true);
Java

If you want to allow going back after that, you should unmark the done state:

	stepView.done(false)
Java

See the sample for additional details.

If you want a custom typeface you should add font files to the resource folder "font" and reference any in xml layout.
Alternatively you can specify typeface using the state builder in your code. Look into the sample for additional details on that.

GitHub