Adding vertical line to ProgressBar

Issue

I have a ProgressBar which works nicely. I have used the following layout:

<ProgressBar style="?android:attr/progressBarStyleHorizontal"
    android:id="@+id/scoreboard_rank_progress_bar"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:layout_marginTop="6dp"
    android:indeterminate="false"
    android:layout_gravity="center_horizontal"
    android:progressDrawable="@drawable/progress_bar" />

Now, I would like to add red vertical lines, for example at 25% and 65% of the bar (from left). I have found the following approach:

Paint linePaint = new Paint();
linePaint.setColor(getResources().getColor(android.R.color.black));
final float lineWidth = 5f;
linePaint.setStrokeWidth(lineWidth);
canvas.drawLine(getWidth() * m100 / 100, 0, 
                getWidth() * m100 / 100, getHeight(), 
                linePaint);

Unfortunately, this does not work because I'm using an Activity and cannot access the canvas. How else can I add vertical lines? Ideally, I would like to do this in code so that I can change it at runtime but if it is only possible in the layout, I would also go that way.

Solution

You need to extend the ProgressBar class and override the onDraw() method that will provide you a canvas to draw on. Then you can do your painting logic, e.g.:

class MyProgressBar extends ProgressBar {
    ...

    @Override
    public void onDraw(Canvas canvas) {
        Paint linePaint = new Paint();
        linePaint.setColor(getResources().getColor(android.R.color.black));
        final float lineWidth = 5f;
        linePaint.setStrokeWidth(lineWidth);
        canvas.drawLine(getWidth() * m100 / 100, 0, 
                getWidth() * m100 / 100, getHeight(), 
                linePaint);
    }
}

Finally, replace the ProgressBar added to the XML file with your custom MyProgressBar.

Additional improvement: move paint initialization outside of the draw method so you don't reinitialize the same object on every onDraw() call. Do the same for the lineWidth.

Answered By - chef417