Skip to content
Related Articles

Related Articles

State ProgressBar in Android
  • Last Updated : 23 Feb, 2021

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. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

State ProgressBar in Android Sample GIF

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

Attributes

Description

layout_width Use for giving specific width.
layout_height Use for giving specific height.
spb_maxStateNumber Use to display the number of states used in the app.
spb_currentStateNumber Use to display the current state.
spb_stateBackgroundColor Use to display background color.
spb_stateForegroundColor Use to display Foreground color.
spb_animateToCurrentProgressState Gives Animation to the current Progress state.
spb_checkStateCompleted Check whether the state is completed or not. 

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. Note that select Java as the programming language.

Step 2: Add dependency of State Progress Bar library in build.gradle file

Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.kofigyan.stateprogressbar:stateprogressbar:1.0.0’

Now click on Sync now it will sync your all files in build.gradle().

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

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

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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"
        android:layout_centerInParent="true"
        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_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="NEXT" />
      
</RelativeLayout>

chevron_right


Step 4: 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. Comments are added inside the code to understand the code in more detail.

Java

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
                }
            }
        });
    }
}

chevron_right


Now click on the run option it will take some time to build Gradle. After that, you will get output on your device as given below.

Output:


Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :