Custom Vertical Progressbar in Android

Question

I need to achieve a custom vertical Progressbar like the one shown in the image below. It must have a circle at the beginning and an arrow at the end.

What would be the best way to achieve this? I'm not a design expert, so I don't know if it would be easier by using a 9png file or creating my own drawable class or another options.

I have tried with the following repo https://github.com/halzhang/Android-VerticalProgressBar, but this only rotates the ProgressBar, it cannot apply a custom view like I need.

Answer 1

Finally, I have created a custom view extending from View class and I've overriden onDraw method, drawing a Line, a Circle and a Triangle.

Check the following code:

@Override
protected synchronized void onDraw(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setColor(getResources().getColor(R.color.grey_300));
    mPaint.setStrokeWidth(STROKE_WIDTH);
    mPaint.setAntiAlias(true);

    canvas.drawLine(centerX, MARGIN, centerX, getHeight() - MARGIN, mPaint);

    canvas.drawCircle(centerX, MARGIN, STROKE_WIDTH, mPaint);

    mPath.reset();
    mPath.moveTo(0, STROKE_WIDTH * 2);
    mPath.lineTo(-STROKE_WIDTH, 0);
    mPath.lineTo(STROKE_WIDTH, 0);
    mPath.close();
    mPath.offset(centerX, getHeight() - TOP_BOTTOM_MARGIN - STROKE_WIDTH);
    canvas.drawPath(mPath, mPaint);
}