Adding vertical line to ProgressBar

Question

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.

You're supposed to use that code in a custom view: https://developer.android.com/training/custom-views/create-view — Nicolas, Jun 08 '20 at 23:22

score 1 · Accepted Answer · answered Jun 09 '20 at 00:36

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.

Thank you very much. I would like to have my custom progress bar the exact similar appearance as the ProgressBar added to my XML file. Do you know how the MyProgressBar class should look like so that it is exactly the same (except for the onDraw method)? — machinery, Jun 09 '20 at 10:00
Just use your custom progress bar in the XML with the same attributes. So instead of — chef417, Jun 09 '20 at 12:56

Adding vertical line to ProgressBar

1 Answers1