Custom form of progress bar

Question

I want to create app in which will be free-form progressbar like this:

Tell me please how can this be done? Perhaps some kind of example.

Answer 1

you can start from this simple custom view (the main idea is to use PathMeasure#getSegment() method):

class V extends View implements View.OnClickListener {
    Path segment = new Path();
    Paint paint = new Paint();
    PathMeasure pm;

    public V(Context context) {
        super(context);
        setOnClickListener(this);
        paint.setColor(0xaa00ff00);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(48);
        paint.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Path src = new Path();

        src.moveTo(16.000000f, 1.630000f);
        src.lineTo(22.030001f, 1.630000f);
        src.cubicTo(23.420000f, 1.620000f, 24.770000f, 2.390000f, 25.469999f, 3.590000f);
        src.lineTo(31.469999f, 14.030000f);
        src.cubicTo(32.169998f, 15.240000f, 32.169998f, 16.790001f, 31.469999f, 18.000000f);
        src.lineTo(25.440001f, 28.440001f);
        src.cubicTo(24.740000f, 29.629999f, 23.379999f, 30.379999f, 22.000000f, 30.379999f);
        src.lineTo(9.970000f, 30.379999f);
        src.cubicTo(8.580000f, 30.379999f, 7.230000f, 29.610001f, 6.530000f, 28.410000f);
        src.lineTo(0.530000f, 17.969999f);
        src.cubicTo(-0.170000f, 16.760000f, -0.170000f, 15.210000f, 0.530000f, 14.000000f);
        src.lineTo(6.560000f, 3.560000f);
        src.cubicTo(7.260000f, 2.370000f, 8.620000f, 1.620000f, 10.000000f, 1.630000f);
        src.close();

        Matrix m = new Matrix();
        RectF srcRect = new RectF(0, 0, 32, 32);
        RectF dstRect = new RectF(0, 0, w, h);
        dstRect.inset(paint.getStrokeWidth() / 2, paint.getStrokeWidth() / 2);
        m.setRectToRect(srcRect, dstRect, Matrix.ScaleToFit.CENTER);
        Path dst = new Path();
        src.transform(m, dst);
        pm = new PathMeasure(dst, true);
        pm.getSegment(0, pm.getLength() / 2, segment, true);
        segment.rLineTo(0, 0);
    }

    void setProgress(float progress) {
        segment.reset();
        float length = pm.getLength();
        float start = progress % length;
        float end = (progress + length / 2) % length;
        if (start < end) {
            pm.getSegment(start, end, segment, true);
        } else {
            pm.getSegment(start, length, segment, true);
            pm.getSegment(0, end, segment, true);
        }
        segment.rLineTo(0, 0);
        invalidate();
    }

    @Override
    public void onClick(View v) {
        ObjectAnimator.ofFloat(this, "progress", 0, 10 * pm.getLength()).setDuration(10 * 2500).start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(segment, paint);
    }
}

~