Fill two image overlay like seekbar on touch event of image-view

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; http://i.imgur.com/Sf6kg.png
Foreground image; http://i.imgur.com/Svtoh.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.

Answer 2

It will be a custom view, and it will be handling the onTouchEvent() method and will redraw when the user touches the view.

The onDraw() method will be checking something like:

if(mIsBeingTouched){
  //set colour to touched
}
doDraw(canvas);
///....

So when the user touches the view, i would increment a count and then increase the arc count.

final float arcDistance = mCurrentCount * 3.6; //Based on a max of 100
canvas.drawArc(mBoundsRectF, 0f, mCurrentCount, mPaint);

Then that would draw based on the count.