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 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.

http://stackoverflow.com/questions/4918079/android-drawing-a-canvas-to-an-imageview — Kamlesh Delat, Nov 10 '16 at 07:34
Do you have called `invalidate()` function after you click the view? — Zhang Xiang, Nov 10 '16 at 09:03

score 13 · Accepted Answer · edited Nov 11 '16 at 11:05

13

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:

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

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

edited Nov 11 '16 at 11:05

IAmGroot

13,760
18
84
154

answered Nov 10 '16 at 16:46

Dmitry Zaytsev

23,650
14
92
146

2

I think some examples , to show how the two images would merge would help. This is a good way of doing it, but i think visuals would explain it better. ( +1 ) – IAmGroot Nov 10 '16 at 16:50
1

@Doomsknight better? – Dmitry Zaytsev Nov 10 '16 at 17:09
how do i place text at the center showing amount of % filled. – Bishnu Dudhraj Nov 10 '16 at 18:00
1

@BDudhraj it's better to create another question on StackOverflow. Or, even better, find already existing answer. – Dmitry Zaytsev Nov 10 '16 at 19:09
1

I felt creative :) Love this solution, and will make use of it in my own projects. Something I hadn't thought of. But once mentioned, made me go "oh ye... why didn't i think of that" – IAmGroot Nov 11 '16 at 11:21
@DmitryZaitsev ! thats very helpful for me thnx! – Bishnu Dudhraj Nov 11 '16 at 12:02
@DmitryZaytsev how do I use above solution? Do I have to create custom view? – Shrikant Oct 30 '18 at 13:18
1

@Shrikant the simplest way to draw it would be to create a new custom View. Just extend the `View` class, override `onDraw` method and use the code above to draw on the `Canvas`. – Dmitry Zaytsev Oct 31 '18 at 12:49
@DmitryZaytsev How do I change canvas.clipRect() to fill image from left to right instead of bottom to top? – Shrikant Nov 01 '18 at 09:06
@Shrikant please do some simple math, it is not that complicated. – Dmitry Zaytsev Nov 06 '18 at 10:13

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

1 Answers1

Linked