Horizontal and Circular Progress Bar in Android

Hello Readers,

I would like to write about Progress Bar in android. Progress Bar is used to indicate the amount of Progress has taken place and progress to be completed. One can see progress bar during copying or moving of files and during installing or uninstalling apps and downloading files from internet.

progressbar

Horizontal Progress Bar

Integrating Progress bar is quite simple. We can do it by using XML as well as android programming. We need all the three following codes to get the Progress bar.

XML code to display ProgressBar

<ProgressBar
	android:id="@+id/progressbar1"
	style="@android:style/Widget.ProgressBar.Horizontal"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentTop="true"
	android:layout_centerHorizontal="true" />

Android code to set Background color and set Progress

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.background);
ProgressBar mProgress = (ProgressBar) findViewById(R.id.progressbar1);
mProgress.setProgress(25);   // Main Progress
mProgress.setSecondaryProgress(50); // Secondary Progress
mProgress.setMax(100); // Maximum Progress
mProgress.setProgressDrawable(drawable);

Background XML file to custom style ProgressBar. Place this file in res/drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:id="@android:id/background">
    <shape>
      <corners android:radius="5dip" />
      <gradient
        android:angle="270"
        android:centerColor="#ff5a5d5a"
        android:centerY="0.5"
        android:endColor="#ff747674"
        android:startColor="#ff9d9e9d" />
    </shape>
  </item>
  <item android:id="@android:id/progress">
    <clip>
      <shape>
        <corners android:radius="5dip" />
          <gradient
            android:angle="0"
            android:endColor="#2EFE64"
            android:startColor="#2EFE64" />
      </shape>
    </clip>
  </item>
</layer-list>

We can also animate the Progress bar to fill from 0 and move on to the progress value set by us.

ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, progress[i]);
animation.setDuration(990);
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

Circular Progress Bar

In order to integrarate the circular Progress Bar, change the XML file in drawable folder with the following code, [res/drawable/circular.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/secondaryProgress">
        <shape
              android:innerRadiusRatio="3"
              android:shape="ring"
              android:thicknessRatio="14.0">

              <gradient
                   android:startColor="#999999"
                   android:endColor="#999999"
                   android:centerColor="#999999"
                   android:type="sweep" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
       <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
              android:innerRadiusRatio="3"
              android:shape="ring"
              android:thicknessRatio="14.0">
               <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%" />
              <gradient
                   android:startColor="#00FF00"
                   android:endColor="#00FF00"
                   android:centerColor="#00FF00"
                   android:type="sweep" />
        </shape>
        </rotate>
    </item>
</layer-list>

Changes in layout XML file

 <ProgressBar
	android:id="@+id/circularProgressbar"
	android:layout_width="250dp"
	android:layout_height="250dp"
	style="?android:attr/progressBarStyleHorizontal"
	android:indeterminate="false"
        android:progress="75"
	android:max="100"
	android:secondaryProgress="100"
	android:progressDrawable="@drawable/circular" />

We can also change Progress bar colors and animate them as well. We can add TextView inside ProgressBar and display the Progress amount in numbers as well.

Edit : In Lollipop version of Android(5.0), Circular Progress Bars might not work as expected. It might fill entire progress bar for even 0 progress. To avoid this we have to add a line in our drawable XML (circular.xml) file.

android:useLevel="true"

After the change, file looks like,
[res/drawable/circular.xml]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/secondaryProgress">
        <shape
              android:innerRadiusRatio="3"
              android:shape="ring"
              android:useLevel="true"
              android:thicknessRatio="14.0">

              <gradient
                   android:startColor="#999999"
                   android:endColor="#999999"
                   android:centerColor="#999999"
                   android:type="sweep" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
       <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
              android:innerRadiusRatio="3"
              android:shape="ring"
              android:useLevel="true"
              android:thicknessRatio="14.0">
               <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%" />
              <gradient
                   android:startColor="#00FF00"
                   android:endColor="#00FF00"
                   android:centerColor="#00FF00"
                   android:type="sweep" />
        </shape>
        </rotate>
    </item>
</layer-list>

Thanks for reading.

Download Source Code from here.

Nagarajan
Follow me

Nagarajan

Web Developer at Energy Alternatives India
I'm interested in developing Web applications andkeen on learning new technologies.

View Nagarajan's Profile
Nagarajan
Follow me

Latest posts by Nagarajan (see all)

Comments
  1. Swapnil
    • Nagarajan
  2. M
  3. Ritesh singh
  4. Vivek Kumar
  5. Vivek Kumar
  6. Vivek Kumar
  7. Vivek Kumar

Leave a Reply

Your email address will not be published. Required fields are marked *