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:
- android:minHeight
- android:minWidth
- android:progress
- 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 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:
