Question

There are two image black and blue while touching on blue image it should fill like progress, I achieved using multiple cuts images without using canvas but not get smoothness on touch, like 100 Pushups application.

Actually I’m trying to achieve similar like 100 Pushups application as I mention above, I got one link to but that’s achieved using canvas and I want to achieve using Images, I Google but no luck, any link or tutorial similar to that application(100 push-ups)?

Answer 1

Here’s something I came up with using clip path. I’m using following images (coder colours) out of which background is a solid one and foreground one contains only blue circle on transparent background. First background image is drawn onto screen, then clip path is set so that progress image, foreground one, is drawn properly on top of it.

Background image; https://i.stack.imgur.com/Rvxxj.png
Foreground image; https://i.stack.imgur.com/1aTdG.png

And the code;

private class ProgressView extends View {

    private Bitmap bgBitmap;
    private Bitmap fgBitmap;
    private RectF fullRect = new RectF();
    private Path clipPath = new Path();

    public ProgressView(Context context) {
        super(context);
        bgBitmap = BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.bg);
        fgBitmap = BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.fg);
    }

    @Override
    public void onDraw(Canvas c) {
        fullRect.right = getWidth();
        fullRect.bottom = getHeight();

        c.drawBitmap(bgBitmap, null, fullRect, null);

        float angle = SystemClock.uptimeMillis() % 3600 / 10.0f;

        clipPath.reset();
        clipPath.setLastPoint(getWidth() / 2, getHeight() / 2);
        clipPath.lineTo(getWidth() / 2, getHeight());
        clipPath.arcTo(fullRect, -90, angle);
        clipPath.lineTo(getWidth() / 2, getHeight() / 2);
        c.clipPath(clipPath);

        c.drawBitmap(fgBitmap, null, fullRect, null);

        invalidate();
    }   
}

Should it not be too difficult to replace my temporary images with decent ones and update the angle in a more appropriate way.