Progress bar with 2 Indicators
-
04-06-2021 - |
Question
I want to have progress bar with 2 indicators.
One indicator shows progress of task A in color green, the second indicator shows progress of task B in red, all in one progress bar. The rest shows the remaining of tasks A and B.
Is there a (simple) solution to achieve this? I read the documentation but did not find help.
Solution
This can be done by coding the two indicators as the Primary progress and secondary progress of the same progress bar.
create a sub class for the progress bar.
public class TextProgressBar extends ProgressBar {
private Paint textPaint;
public TextProgressBar(Context context) {
super(context);
textPaint = new Paint();
textPaint.setColor(Color.BLACK);
}
public TextProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
textPaint = new Paint();
textPaint.setColor(Color.BLACK);
setMax(30);
setProgress(12);
setSecondaryProgress(20);
}
}
The XML entry for the progress bar has to be referred to using this sub class.
<com.darsh.doubleProgressBar.TextProgressBar
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" />
now create the drawable in the resources directory
<?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>
</layer-list>
The colors for the primary and secondary indicators can be changed in this drawable.
Make use of them in your code like this:
TextProgressBar textProgress;
textProgress = (TextProgressBar)findViewById(R.id.progressBar1);
textProgress.setMax(100);
textProgress.setProgress(10); //
textProgress.setSecondaryProgress(50); //green
OTHER TIPS
Make a custom layuout and put the two progressbars in it. Then you need to manipulate the progressbars by getting their handle. If its for a notification, you have to set it as a remote View.