Android Progress Bar with primary and secondary progress - Sample Code

How to implement a horizontal android progress bar with primary and secondary progresses.

Progress bar in android is used to indicate the progress of a task. A horizontal progress bar is the best way to display the progress of a file download , buffering progress or any task of that sort.

This article shows how to implement a horizontal progress bar with a primary progress as well as a secondary progress. As a first step create a sub class for the progress bar.

public class MyProgressBar extends ProgressBar {
    private Paint textPaint;

    public MyProgressBar(Context context) {
        super(context);
        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
    }

    public MyProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        setMax(30);
        setProgress(12);
        setSecondaryProgress(20);

    }
}

Here the primary and secondary progresses can set to using the setProgress and setSecondaryProgress methods. It can be set to any variables, the value of which will be shown instantaneously in the progress bar as primary and secondary progresses in the progress bar.

The XML entry of the progress bar in the layout file should refer to this sub class of the progress bar.

A sample XML entry is shown below.

<com.example.doubleProgressBar.MyProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="15sp"
    android:layout_marginLeft="1sp"
    android:layout_marginRight="1sp"
    android:layout_marginTop="10sp"
    android:progressDrawable="@drawable/progress" />

A drawable for the progress bar should be created inside the resources for the project.

<?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.75"
            android:endColor="#ff747674"
            android:startColor="#ff5a5d5a" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />


            <gradient
                android:angle="270"
                android:centerColor="#32cd32"
                android:centerY="0.75"
                android:endColor="#32cd32"
                android:startColor="#32cd32" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="5dip" />

            <gradient
                android:angle="270"
                android:endColor="#33B5E5"
                android:startColor="#33B5E5" />
        </shape>
    </clip>
</item>

The colors for the primary and secondary progresses inside this drawable for the progress bar.

DOWNLOAD SAMPLE CODE