Fill two image overlays, for example, in search mode when viewing images

Question

There are two images of black and blue, touching the blue image, it should fill as progress, I have achieved several images of the section without using the canvas, but I do not get smoothness when touched, for example 100 Pushups application .

In fact, I am trying to achieve a similar application of 100 Pushups, as I mentioned above, I got a link, but received via canvas and I want to achieve the use of images, I’m Google, but not luck, any link or tutorial similar to this application (100 push ups)?

Answer 1

Here I came up with a clip. I use the following images (encoder colors), of which the background is solid, and the foreground contains only a blue circle on a transparent background. The first background image is drawn on the screen, then the clip path is set so that the progress image, the foreground, is correctly drawn 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(); } } 

It should not be too difficult to replace my temporary images with decent ones and update the angle in a more suitable way.

Answer 2

This will be a custom view, and it will handle the onTouchEvent() method and will be redrawn when the user touches the view.

The onDraw() method will check something like:

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

Therefore, when the user touches the view, I would increase the counter and increase the arc counter.

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

This will then be output based on the count.