How to Create a Custom Stepper Form in Android?

In this article, we are going to implement the multi-step form in modern Android apps. The basic working of that is when User Clicks on the Next Button then a new form comes with different input fields. Also, we have added a step indicator feature to track the user’s progress through the steps. Also, You can add some more validations in the text fields of each activity. A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

In the main activity, we have added one linear layout at the top of the activity for Step Indicator and added two Buttons one for Previous and Next and we are making it visible according to the activity.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/step_indicators_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"/>

    <LinearLayout
        android:id="@+id/container_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/previous_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Previous"
            android:visibility="visible" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:layout_gravity="end" />

    </LinearLayout>

</LinearLayout>

Step 3: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. First initialized all the views from activity_main.xml and the Arrays steps and stepindicators are used to reference to views in MainActivity class.

• steps is an array of View objects and is used to store the individual steps or screens in a multi-step process. Each step represents a specific layout or screen within the app.
• stepIndicators is an array of TextView objects and is used to store the indicators that represent each step visually. Also, we have used Layout Inflater and Layout Params the basic principle for that are:-
• Layout Inflater: Layout Inflater is used to instantiate an XML layout file into its corresponding View objects in Android applications.
• Layout Params: Layout Params are used to define the rules and specifications for how Views should be laid out within their parent ViewGroup.

And when the form is last then automatically the next button text view is changed to Submit and on click, we are displaying one Toast message to user. Comments are added inside the code to understand the code in more detail.

Java

package com.example.gfgapp;

import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private LinearLayout containerLayout;
    private Button previousButton;
    private Button nextButton;
    private LinearLayout stepIndicatorsLayout;

    private int currentStep = 0;
    private View[] steps;
    private TextView[] stepIndicators;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initializing views from activity_main
        containerLayout = findViewById(R.id.container_layout);
        previousButton = findViewById(R.id.previous_button);
        nextButton = findViewById(R.id.next_button);
        stepIndicatorsLayout = findViewById(R.id.step_indicators_layout);

        // Initializing steps (views)
        steps = new View[]{
                LayoutInflater.from(this).inflate(R.layout.layout_general_info, containerLayout, false),
                LayoutInflater.from(this).inflate(R.layout.layout_personal_info, containerLayout, false),
                LayoutInflater.from(this).inflate(R.layout.activity_main3, containerLayout, false)
        };

        // Initializing step indicators (circles and arrows)
        initializeStepIndicators();


        showCurrentStep();

        // Seting click listener for previous button
        previousButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (currentStep > 0) {
                    currentStep--;
                    showCurrentStep();
                }
            }
        });

        // Seting click listener for next button
        nextButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (currentStep < steps.length - 1) {
                    currentStep++;
                    showCurrentStep();
                } else {
                    // When Last step reached submit the form
                    submitForm();
                }
            }
        });
    }

    // Initializing step indicators with circles and arrows
    private void initializeStepIndicators() {
        stepIndicators = new TextView[steps.length];
        for (int i = 0; i < steps.length; i++) {
            TextView stepIndicator = new TextView(this);
            stepIndicator.setText(String.valueOf(i + 1));
            stepIndicator.setTextColor(Color.WHITE);
            stepIndicator.setTextSize(18);
            stepIndicator.setBackgroundResource(R.drawable.circle_gray);
            stepIndicator.setGravity(Gravity.CENTER);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
              // The Margins are set like this
            // Left margin: 10 pixels
            // Top margin: 0 pixels (no margin)
            // Right margin: 10 pixels
            // Bottom margin: 0 pixels (no margin)
            params.setMargins(10, 0, 10, 0);
            stepIndicator.setLayoutParams(params);
            stepIndicatorsLayout.addView(stepIndicator);
            stepIndicators[i] = stepIndicator;

            if (i < steps.length - 1) {
                addArrowIndicator(stepIndicatorsLayout);
            }
        }
    }

    // Adding arrow indicator between step indicators
    private void addArrowIndicator(LinearLayout stepIndicatorsLayout) {
        ImageView arrow = new ImageView(this);
          // to add this create a new drawable resource file in res->drawable
        arrow.setImageResource(R.drawable.ic_arrow);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );
        params.gravity = Gravity.CENTER_VERTICAL;
        arrow.setLayoutParams(params);
        stepIndicatorsLayout.addView(arrow);
    }

    // Showing the current step
    private void showCurrentStep() {
        containerLayout.removeAllViews();
        containerLayout.addView(steps[currentStep]);
        // If Current Step is greater then 0 then making Previous Button Visible
        previousButton.setVisibility(currentStep > 0 ? View.VISIBLE : View.INVISIBLE);
        nextButton.setText(currentStep < steps.length - 1 ? "Next" : "Submit");

        updateStepIndicators();
    }

    // Updating the step indicators to highlight the current step
    private void updateStepIndicators() {
        for (int i = 0; i < stepIndicators.length; i++) {
            if (i == currentStep) {
                stepIndicators[i].setBackgroundResource(R.drawable.circle_green);
            } else {
                stepIndicators[i].setBackgroundResource(R.drawable.circle_gray);
            }
        }
    }

    // When clicked on submit button at last form/activity
    private void submitForm() {
        Toast.makeText(MainActivity.this, "Hello", Toast.LENGTH_SHORT).show();
    }
}

colors that are used:

created color on drawable file(res > drawable)

circle_gray.xml:

XML

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#808080" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

circle_green.xml:

XML

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#00FF00" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

Output: