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 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
android:shape="oval"> <solid android:color="#808080" /> <size android:width="20dp" android:height="20dp" /></shape> |
circle_green.xml:
XML
android:shape="oval"> <solid android:color="#00FF00" /> <size android:width="20dp" android:height="20dp" /></shape> |
Output:
