Develop Reference

cropping the top of an image on the boundary of a circle

I am new to Android development and I need to create this layout.
Any suggestion on how to do the cropping of the top part of the image with the circle would be greatly appreciated.
Thank you!
Edit:
This not the same as the suggested duplicate as they are cropping the entire image into a circle and I only need the top part.

This almost a duplicate of the linked question, so you can start from its answer to do what you want.
The relevant part to update is
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
bitmap.getWidth() / 2, paint);
If you read [the doc](http://developer.android.com/reference/android/graphics/Canvas.html#drawCircle(float, float, float, android.graphics.Paint)) of this method, you see that
the first param is the x coordinate of the center of the circle
the second param is the y coordinate of the center of the circle
the first coordinate is the radius of the circle
In the question above, the circle is drawn from the center of the bitmap. In your case, you want the center to be at e.g. 3/4 from the top.
Try this code instead
canvas.drawCircle(bitmap.getWidth() / 2, (bitmap.getHeight() / 4) * 3,
bitmap.getWidth() / 2, paint);
and let us know.

Setting a radial gradient as the background color of a circle on canvas

I draw some circles on a canvas using .drawCircle.
I would like the fill color of that circle to be a radial gradient (or linear gradient if that's not possible).
Basically I want the circles to have some depth to them.
I'm not quite sure how to accomplish this.
I know I can define a gradient as a drawable, but is there a way to set that as the background for the drawn circle?
For example in WPF I can simply define a LinearGradientBrush and define it's stop points.
Some code for context:
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(4);
canvas.drawCircle((float) temp_dot.get_x(),
(float) temp_dot.get_y(),
(float) temp_dot.get_radius(),
paint);
Thanks in advance for your time.

before drawing the circle, use the following code :
paint.setShader(new RadialGradient(
centerX,
centerY,
radius,
centerColor,
externalColor,
Shader.TileMode.CLAMP
));
canvas.drawCircle(..., paint);
See the RadialGradient if you want to have a more custom radial gradient.

How to create a resizable circle with user touch events?

I am trying to create a circle shape that will be resized on onTouchEvent.
I have followed resizable rectangle post, but I think due to lack of mathematics knowledge, I am not getting how to create resizeable circle.
I have tried changing
canvas.drawRect(
left + colorballs.get(0).getWidthOfBall() / 2,
top + colorballs.get(0).getWidthOfBall() / 2,
right + colorballs.get(2).getWidthOfBall() / 2,
bottom + colorballs.get(2).getWidthOfBall() / 2, paint);
to canvas.drawCircle(); it creates the circle but not quite what I wanted.
Can you please tell me is there any thing like this already implemented or what points should I follow to convert this rectangle example to resizable circle.

So, the center of circle will be:
float cx = (left + right) / 2f;
float cy = (top + bottom) / 2f;
-- quite obvious. Radius can be calculated using Math.hypot():
float radius = Math.hypot(top - bottom, right - left) / 2f;
Thus, we have center and radius to draw a circle:
drawCircle(cx, cy, radius, paint);

Weird behaviour in drawing a ring using Path.arcTo() in Android

I have implemented an animated drawing ring by start sweeping at angle 0 to 360 successfully.
However when the tail of the ring meets its head at 360 angle, all drawing is disappear.
This is my code for the ring in onDraw()
float startAngle = 270;
float sweepAngle = -359;
paint.setColor(Color.DKGRAY);
paint.setShadowLayer(4, 2, 2, 0x80000000);
rectF.set(cenX - outerRadius, cenY - outerRadius, cenX + outerRadius,
cenY + outerRadius);
path.arcTo(rectF, startAngle, sweepAngle);
//canvas.drawArc(rectF, 0, 360, false, paint);
rectF.set(cenX - innerRadius, cenY - innerRadius, cenX + innerRadius,
cenY + innerRadius);
/*paint.reset();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
canvas.drawArc(rectF, 0, 360, false, paint);*/
path.arcTo(rectF, startAngle + sweepAngle, -(sweepAngle));
canvas.drawPath(path, paint);
and this is the result,
notice here that i set sweepAngle to -359 just before it becomes circle.
However if I change sweepAngle to -360. It produces this result.
It disappears!!
Anyone know how to solve this please help me?
Thanks.
PS. I don't want to use drawArc() because I want to make a hole inside the ring. With drawArc(), my button will be gone.

I suppose android will mod 360 before really drawing it. So x - 360 === x and it will draw nothing!

I'm way late with this, but I solved it by adding a solid circle as the last frame of the animation (I was using AnimationDrawable, but the idea is the same in this case). All the draw code was the same for that last frame, except one line:
replace:
mPath.arcTo(rectF, startAngle, sweepAngle);
with something like:
mPath.addCircle(cenX, cenY, innerRadius, Path.Direction.CCW);

Zoom in a canvas using canvas.scale function?

I have implemented a long onDraw method which draws a set of rectangles. The rectangles are too small and I want them to appear bigger. But unfortunately I can't change the rectangle coordinates because they are stored in a database. So is there any way I can zoom in the canvas using canvas.scale() ?

I'm going to preface this answer by saying you will need to draw everything at 0,0 and then scale it, and finally translate it to behave properly.
Simply do the following in your onDraw method:
canvas.save();
canvas.translate(xValue, yValue);
canvas.scale(xScale, yScale)
/* draw whatever you want scaled at 0,0*/
canvas.restore();
xScale shrinks or stretches in the X direction,
yScale shrinks or stretches in the Y direction.
1.0 is the default for these, so 2.0 would stretch it by double and 0.5 would shrink it by half.
Example:
canvas.save();
canvas.translate(50, 50);
canvas.scale(0.5f, 0.5f);
canvas.drawRect(0.0, 0.0, 5.0, 5.0, paint);
canvas.restore();
This will draw a rectangle with length 5.0, and width 5.0, scale it down to 2.5 for length and width, and then move it to (50, 50).
The result will be a rectangle drawn as if you did this:
canvas.drawRect(50.0, 50.0, 52.5, 52.5, paint);
I hope this helps!