How to Add Line ProgressBar with CardView using Buttons in Android?

Android ProgressBar is a graphical representation or view indicator that displays a bar or ring representing the completion of the task. It gives the user an idea of the time to finish the task. Some basic attributes used in ProgressBar are:

1. android:minHeight  
2. android:minWidth
3. android:progress
4. style

There are many types of ProgressBar in android:

• Step ProgressBar
• Ring ProgressBar
• Line ProgressBar

What is a Line ProgressBar?

It provides users with feedback on the status of a long – runtime operations or indicates task completion. A sample image is given below to get an idea about what we are going to do in this article.

Implementations

Step 1: Create a new project in android studio

new project

Step 2: In your main xml file write the given code below

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:padding="10dp"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
      android:layout_width="380dp"
      android:backgroundTint="#EEFDEF"
      android:layout_height="450dp"
      android:layout_marginLeft="6dp"
      app:cardCornerRadius="35dp"
      android:layout_marginTop="100dp"
      android:elevation="20dp"
      android:outlineAmbientShadowColor="@color/black">

    <com.anton46.stepsview.StepsView
        android:id="@+id/spb"
        android:backgroundTint="#B0F6B3"
        android:background="#166C1A"
        android:layout_width="380dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_up"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:text="UP"
            android:layout_marginLeft="15dp"
            android:textSize="18sp"
            android:backgroundTint="#248E28"
            android:layout_marginTop="290dp"/>

        <Button
            android:id="@+id/btn_down"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:text="DOWN"
            android:layout_marginLeft="250dp"
            android:textSize="18sp"
            android:backgroundTint="#248E28"
            android:layout_marginTop="290dp"/>

    </RelativeLayout>

    <TextView
        android:layout_marginTop="70dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line progress bar"
        android:textStyle="bold"
        android:layout_marginLeft="110dp"
        android:textColor="@color/black"
        android:textSize="24dp"/>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Step 3: In your main activity add this code given below

Java

package com.shruti.gfglineprog;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.anton46.stepsview.StepsView;
import com.shruti.gfglineprog.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;

    String[] descriptionData={"C","C++","Java","DSA"};

    int current_state = 0;

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

        binding=ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        StepsView stepsView = binding.spb;
        stepsView.setLabels(descriptionData);
        stepsView.setBarColorIndicator(Color.BLACK);
        stepsView.setProgressColorIndicator(getResources().getColor(R.color.colorAccent));
        stepsView.setLabelColorIndicator(getResources().getColor(R.color.colorAccent));
        stepsView.setCompletedPosition(0);
        stepsView.drawView();

        binding.spb.setCompletedPosition(current_state);

        binding.btnUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(current_state<(descriptionData.length-1)){
                    current_state=current_state+1;
                    binding.spb.setCompletedPosition(current_state).drawView();
                }

                Log.d("current_state = ",current_state+"");
            }
        });

        binding.btnDown.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(current_state>0){
                    current_state=current_state-1;
                    binding.spb.setCompletedPosition(current_state).drawView();
                }
            }
        });

    }
}

Step 4: In your gradle module file add this dependency given below

implementation 'com.anton46:stepsview:0.0.2' 

dependency

Note: Change the colors accordingly as per your theme in colors.xml.

Output: