State ProgressBar in Android

State Progress Bar is one of the main features that we see in many applications. We can get to see this feature in ticket booking apps, educational apps. This progress bar helps to tell the user the steps to be carried out for performing a task. In this article, we are going to see how to implement State Progress Bar in Android.

Application of State Progress Bar

• Used in most of the service providing applications such as ticket booking, exam form filling, and many more.
• This State Progress Bar helps the user's steps to be carried out for performing the task.
• Use in various exam form-filling applications.

Attributes of State Progress Bar

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add dependency

Navigate to Gradle Scripts > build.gradle.kts(Module :app) and add the following dependency under the dependencies {} section.

dependencies {
    ...
    implementation ("com.github.kofigyan:StateProgressBar:69b4192777") {
        exclude(group = "com.android.support", module = "support-v4")
    }
}

Navigate to Gradle Scripts > settings.gradle.kts and add the following code under the repositories{} section.

dependencyResolutionManagement {
    ...
    repositories {
        ...
        maven { url = uri("https://jitpack.io") }
    }
}

Navigate to Gradle Scripts > gradle.properties and add the following code at the end.

android.enableJetifier=true

Now click on Sync now.

Step 3: Create a new State Progress Bar in your activity_main.xml file

Navigate to the app > res > layout > activity_main.xml file. Below is the code for the activity_main.xml file.

activity_main.xml:

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

    <!--Progress Bar created-->
    <com.kofigyan.stateprogressbar.StateProgressBar
        android:id="@+id/your_state_progress_bar_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:spb_animateToCurrentProgressState="true"
        app:spb_checkStateCompleted="true"
        app:spb_currentStateDescriptionColor="#0F9D58"
        app:spb_currentStateNumber="one"
        app:spb_maxStateNumber="four"
        app:spb_stateBackgroundColor="#BDBDBD"
        app:spb_stateDescriptionColor="#808080"
        app:spb_stateForegroundColor="#0F9D58"
        app:spb_stateNumberBackgroundColor="#808080"
        app:spb_stateNumberForegroundColor="#eeeeee" />

    <!--Button to go on next step-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="NEXT" />

</LinearLayout>

Step 4: Working with the MainActivity file

Go to the MainActivity file and refer to the following code. Below is the code for the MainActivity file. Comments are added inside the code to understand the code in more detail.

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import com.kofigyan.stateprogressbar.StateProgressBar;

public class MainActivity extends AppCompatActivity {

    // steps on state progress bar
    String[] descriptionData = {"Step One", "Step Two", "Step Three", "Step Four"};

    Button button;

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

        StateProgressBar stateProgressBar = (StateProgressBar) findViewById(R.id.your_state_progress_bar_id);
        stateProgressBar.setStateDescriptionData(descriptionData);

        // button given along with id
        button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                switch (stateProgressBar.getCurrentStateNumber()) {
                    case 1:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.TWO);
                        break;
                    case 2:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.THREE);
                        break;
                    case 3:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.FOUR);
                        break;
                    case 4:
                        stateProgressBar.setAllStatesCompleted(true);
                        break;
                }
            }
        });
    }
}

package org.geeksforgeeks.demo

import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.kofigyan.stateprogressbar.StateProgressBar


class MainActivity : AppCompatActivity() {

    // steps on state progress bar
    private var descriptionData: Array<String> = arrayOf("Step One", "Step Two", "Step Three", "Step Four")
    private var button: Button? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val stateProgressBar =
            findViewById<View>(R.id.your_state_progress_bar_id) as StateProgressBar
        stateProgressBar.setStateDescriptionData(descriptionData)

        // button given along with id
        button = findViewById<View>(R.id.button) as Button

        button!!.setOnClickListener {
            when (stateProgressBar.currentStateNumber) {
                1 -> stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.TWO)
                2 -> stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.THREE)
                3 -> stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.FOUR)
                4 -> stateProgressBar.setAllStatesCompleted(true)
            }
        }
    }
}

Output: