Android Widget Arc Progress

Question

In my android app I got few widgets and I want them to look like these progress bars.

Now I know that I can not use any external libs to do this as widgets dont support most of the custom views. I have seen most developers use bitmap to draw things like this. I can manage to draw a full circle. But how can I draw this arc shape progress bar using bitmap or is there any other way?

Appreciate your help. Thanks!

Answer 1

ANSWERING MY OWN QUESTION:

If anybody looking for this kind of widget, I managed to get it working following code. Hope this will help someone.

private Bitmap getWidgetBitmap(Context context, int percentage) {

        int width = 400;
        int height = 400;
        int stroke = 30;
        int padding = 5;
        float density = context.getResources().getDisplayMetrics().density;

        //Paint for arc stroke.
        Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG | Paint.ANTI_ALIAS_FLAG);
        paint.setStrokeWidth(stroke);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeCap(Paint.Cap.ROUND);
        //paint.setStrokeJoin(Paint.Join.ROUND);
        //paint.setPathEffect(new CornerPathEffect(10) );

        //Paint for text values.
        Paint mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize((int) (context.getResources().getDimension(R.dimen.widget_text_large_value) / density));
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextAlign(Paint.Align.CENTER);

        final RectF arc = new RectF();
        arc.set((stroke/2) + padding, (stroke/2) + padding, width-padding-(stroke/2), height-padding-(stroke/2));

        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        //First draw full arc as background.
        paint.setColor(Color.argb(75, 255, 255, 255));
        canvas.drawArc(arc, 135, 275, false, paint);
        //Then draw arc progress with actual value.
        paint.setColor(Color.WHITE);
        canvas.drawArc(arc, 135, 200, false, paint);
        //Draw text value.
        canvas.drawText(percentage + "%", bitmap.getWidth() / 2, (bitmap.getHeight() - mTextPaint.ascent()) / 2, mTextPaint);
        //Draw widget title.
        mTextPaint.setTextSize((int) (context.getResources().getDimension(R.dimen.widget_text_large_title) / density));
        canvas.drawText(context.getString(R.string.widget_text_arc_battery), bitmap.getWidth() / 2, bitmap.getHeight()-(stroke+padding), mTextPaint);

        return  bitmap;
    }

This produced following.

Thanks!

Answer 2

Yes, you need a bitmap but it's easy enough to draw an arc on a bitmap the same way you would draw an arc on a custom view:

    Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawArc(arcRect, startAngle, sweepAngle, false, paint);

    RemoteViews views = new RemoteViews(updateService.getPackageName(), R.layout.widget);
    views.setImageViewBitmap(R.id.image_view, bitmap);