B Dudhraj B Dudhraj - 22 days ago 11
Android Question

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

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

this is the code

public class DrawView extends View {
Paint paint = new Paint();

public DrawView(Context context) {
super(context);
}

@Override
public void onDraw(Canvas canvas) {
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawRect(30, 30, 100, 100, paint);
paint.setStrokeWidth(0);
paint.setColor(Color.GRAY);
canvas.drawRect(33, 60, 97, 97, paint);
paint.setColor(Color.WHITE);
canvas.drawRect(33, 33, 97, 60, paint);

}


Any Suggestion will be much helpful for me.
Thanks in advance.

Answer

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

EDIT

Here how your not-filled image might look like:

enter image description here

Fille image:

enter image description here

And finally the result:

enter image description here

Comments