Using canvas and bitmap in Android , how to get this image?

Question

I am new in android. I am trying to draw this image(match statistic) and fill the image with color with 10% to 100% . I tried this much and this is image

this is the

Answer 1

I would prepare two images - fully filled and not filled (only stroke). Having that, load them as two Bitmap objects and then draw like that:

float fillProgress = 0.1f; // let's say image is 10% filled

canvas.drawBitmap(onlyStroke, 0f, 0f, null);  // draw just stroke first

canvas.save();
canvas.clipRect(
    0f,                                       // left
    getHeight() - fillProgress * getHeight(), // top
    getWidth(),                               // right
    getHeight()                               // bottom
);
canvas.drawBitmap(filled, 0f, 0f, null);      // region of filled image specified by clipRect will now be drawn on top of onlyStroke image
canvas.restore();

Using two images, outlined and filled e.g. below.

The code above does the following:

1. draw outline.
2. apply clip (crop) area.
3. draw filled shape with crop applied.
4. remove clip, image as desired.

Applying different clip sizes, you can get the % of fill you require. e.g.