Open In App

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

Last Updated : 30 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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: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:

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads