android - progressbar - Forma personalizada de la barra de progreso

progress bar android ejemplo

Question

Quiero crear una aplicación en la cual habrá una barra de progressbar forma libre como esta:

Dime, por favor, ¿cómo se puede hacer esto? Quizás algún tipo de ejemplo.

Gracias.

Answer 1

puede comenzar desde esta simple vista personalizada (la idea principal es usar el PathMeasure#getSegment() ):

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);
}
}

~