Create custom convex path Android - android

I wish to set a custom shape (different radius for each corner of rectangle) to my frame layout, so that views in the frame layout will clip to the shape's bounds.
ViewOutlineProvider provider = new ViewOutlineProvider() {
#Override
public void getOutline(View view, Outline outline) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
configurePath(getWidth(), getHeight());
outline.setConvexPath(borderPath);
}
}
};
setOutlineProvider(provider);
setClipToOutline(true);
And the configurePath() looks like this:
private void configurePath (int width, int height) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
return;
}
borderPath.rewind();
float minSize = Math.min(width, height);
float maxRadiusWidth = 2 * Math.max(Math.max(topLeftRadius, topRightRadius),
Math.max(bottomLeftRadius, bottomRightRadius));
if (minSize < maxRadiusWidth) {
borderPath.addRect(0, 0, width, height, Path.Direction.CCW);
return;
}
// Top left circle
oval.set(0, 0, 2 * topLeftRadius, 2 * topLeftRadius);
borderPath.moveTo(0, topLeftRadius);
borderPath.arcTo(oval, 180, -90);
borderPath.rLineTo(width - topLeftRadius - topRightRadius, 0);
// Top right circle
oval.set(width - 2 * topRightRadius, 0, width, 2 * topRightRadius);
borderPath.arcTo(oval, 90, -90);
borderPath.rLineTo(0, height - topRightRadius - bottomRightRadius);
// Bottom right circle
oval.set(width - 2 * bottomRightRadius, height - 2 * bottomRightRadius, width, height);
borderPath.arcTo(oval, 0, -90);
borderPath.rLineTo(-width + bottomRightRadius + bottomLeftRadius, 0);
// Bottom left circle
oval.set(0, height - 2 * bottomLeftRadius, 2 * bottomLeftRadius, height);
borderPath.arcTo(oval, -90, -90);
borderPath.rLineTo(0, -height + bottomLeftRadius + topLeftRadius);
}
When I run it, I got java.lang.IllegalArgumentException: path must be convex and I could not get into native_isConvex() and see how it decides if a path is convex.
So what is a convex path? Why the path in congfigurePath() is not convex?
How can I create a custom convex path? Thank you.

I figured it out by myself. The path is not convex because I was not drawing the path correctly. The correct path that achieve the multiple corner radius effect I wanted should be:
// Top left circle
oval.set(0, 0, 2 * topLeftRadius, 2 * topLeftRadius);
borderPath.moveTo(0, topLeftRadius);
borderPath.arcTo(oval, -180, 90);
borderPath.rLineTo(width - topLeftRadius - topRightRadius, 0);
// Top right circle
oval.set(width - 2 * topRightRadius, 0, width, 2 * topRightRadius);
borderPath.arcTo(oval, -90, 90);
borderPath.rLineTo(0, height - topRightRadius - bottomRightRadius);
// Bottom right circle
oval.set(width - 2 * bottomRightRadius, height - 2 * bottomRightRadius, width, height);
borderPath.arcTo(oval, 0, 90);
borderPath.rLineTo(-width + bottomRightRadius + bottomLeftRadius, 0);
// Bottom left circle
oval.set(0, height - 2 * bottomLeftRadius, 2 * bottomLeftRadius, height);
borderPath.arcTo(oval, 90, 90);
borderPath.rLineTo(0, -height + bottomLeftRadius + topLeftRadius);
Update: Although the path is correct now, it is still not convex path, seems like customized path will not be treated as convex path.

Nice that you got it working, but there are built in tools for this.
Easiest is in a drawable xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomRightRadius="0dp" />
<solid android:color="#fff" />
</shape>
Programatically you can use the RoundRectShape class. That's also what will be inflated from above xml.
In the curstructor you pass outer corner radius, line thickness and inner corner radius. You can also look at the source to see how they create a path (tip: path.addRoundRect()).

Related

draw rounded corner inside rectangle

I designed one view in which i have rounded corners. and inside that view i have other view. i give rounded corners to stroke but its not effecting inside box. you can view in below screenshot.
you can see in both inside corners. there are not properly rounded shape.
so how can I do that with proper rounded shape?
below is code:
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(mBorderColor);
paint.setStyle(Style.STROKE);
float strokeWidth = mHeight / 30.0f;
float strokeWidth2 = strokeWidth / 2;
paint.setStrokeWidth(strokeWidth);
int space = 3;
int headHeight = (int) (strokeWidth + 10.5f);
Path strokepath = RoundedRect(strokeWidth2, headHeight + strokeWidth2, mWidth - strokeWidth2, mHeight - strokeWidth2, 15, 15,
true, true, true, true);
canvas.drawPath(strokepath, paint);
Path fillpath = RoundedRect(strokeWidth+space, headHeight + strokeWidth + topOffset-space, mWidth - strokeWidth-space, mHeight - strokeWidth-space, 15, 15,
true, true, true, true);
canvas.drawPath(fillpath, mViewPaint);
paint.setStyle(Style.FILL);
public static Path RoundedRect(
float left, float top, float right, float bottom, float rx, float ry,
boolean tl, boolean tr, boolean br, boolean bl) {
Path path = new Path();
if (rx < 0) rx = 0;
if (ry < 0) ry = 0;
float width = right - left;
float height = bottom - top;
if (rx > width / 2) rx = width / 2;
if (ry > height / 2) ry = height / 2;
float widthMinusCorners = (width - (2 * rx));
float heightMinusCorners = (height - (2 * ry));
path.moveTo(right, top + ry);
if (tr)
path.rQuadTo(0, -ry, -rx, -ry);//top-right corner
else {
path.rLineTo(0, -ry);
path.rLineTo(-rx, 0);
}
path.rLineTo(-widthMinusCorners, 0);
if (tl)
path.rQuadTo(-rx, 0, -rx, ry); //top-left corner
else {
path.rLineTo(-rx, 0);
path.rLineTo(0, ry);
}
path.rLineTo(0, heightMinusCorners);
if (bl)
path.rQuadTo(0, ry, rx, ry);//bottom-left corner
else {
path.rLineTo(0, ry);
path.rLineTo(rx, 0);
}
path.rLineTo(widthMinusCorners, 0);
if (br)
path.rQuadTo(rx, 0, rx, -ry); //bottom-right corner
else {
path.rLineTo(rx, 0);
path.rLineTo(0, -ry);
}
path.rLineTo(0, -heightMinusCorners);
path.close();//Given close, last lineto can be removed.
return path;
}
With the way that corners are drawn, the inner part of the corner will always be of a smaller radii than the outer part of the corner. To get the right radii for the inner part you have to draw it onto the screen. In this case you have to draw the space between the Stoke Path and the Fill Path. The code below is what is needed to draw the space, if mViewPaint does not have a stroke width.
Paint spacePaint = new Paint();
spacePaint.setAntiAlias(true);
spacePaint.setColor(mBackground);
spacePaint.setStyle(Paint.Style.STROKE);
spacePaint.setStrokeWidth(space*2);
Path spacepath = RoundedRect(strokeWidth + space,
headHeight + strokeWidth + topOffset-space,
mWidth - strokeWidth - space,
mHeight - strokeWidth - space,
15, 15,
true, true, true, true);
canvas.drawPath(spacepath, spacePaint);
You also have to change the following line for this to work
paint.setStyle(Paint.Style.STROKE);
to
paint.setStyle(Paint.Style.FILL_AND_STROKE);
Now as others have suggested you could have used either Canvas.drawRoundRect() or Path.addRoundRect and they would have done the same thing as your method RoundedRect.

Draw one shape in another shape

First I will explain what I am trying to achieve. I am trying to achieve cropping functionality. For that, I am drawing one rectangle on canvas and then trying to draw heart inside rectangle. So If user minimize/maximize rectangle heart will also minimize/maximize.
Here is my code.
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mIsInitialized) {
setMatrix();
Matrix localMatrix1 = new Matrix();
localMatrix1.postConcat(this.mMatrix);
Bitmap bm = getBitmap();
if (bm != null) {
canvas.drawBitmap(bm, localMatrix1, mPaintBitmap);
// draw edit frame
drawEditFrame(canvas);
}
}
}
private void drawEditFrame(Canvas canvas) {
mPaintTransparent.setFilterBitmap(true);
mPaintTransparent.setColor(mOverlayColor);
mPaintTransparent.setStyle(Paint.Style.FILL);
Path path = new Path();
path.addRect(mImageRect.left, mImageRect.top, mImageRect.right, mImageRect.bottom,
Path.Direction.CW);
drawHeart(mFrameRect.centerX(), mFrameRect.centerY(), path);
canvas.drawPath(path, mPaintTransparent);
}
private Path drawHeart(float width, float height, Path path) {
// Starting point
path.moveTo(width / 2, height / 5);
// Upper left path
path.cubicTo(5 * width / 14, 0,
0, height / 15,
width / 28, 2 * height / 5);
// Lower left path
path.cubicTo(width / 14, 2 * height / 3,
3 * width / 7, 5 * height / 6,
width / 2, height);
// Lower right path
path.cubicTo(4 * width / 7, 5 * height / 6,
13 * width / 14, 2 * height / 3,
27 * width / 28, 2 * height / 5);
// Upper right path
path.cubicTo(width, height / 15,
9 * width / 14, 0,
width / 2, height / 5);
return path;
}
private void setMatrix() {
mMatrix.reset();
mMatrix.setTranslate(mCenter.x - mImgWidth * 0.5f, mCenter.y - mImgHeight * 0.5f);
mMatrix.postScale(mScale, mScale, mCenter.x, mCenter.y);
mMatrix.postRotate(mAngle, mCenter.x, mCenter.y);
}
But heart is sticking at top left corner and not moving or minimizing/maximizing as per rectangle.
Here is current image for reference.
Please provide me hint or any reference.
EDIT I am able to draw circle inside rectangle which minimize/maximize as per rectangle size and move as per rectangle move. But I am not able to do same with custom heart. Here is code for circle.
path.addCircle((mFrameRect.left + mFrameRect.right) / 2,
(mFrameRect.top + mFrameRect.bottom) / 2,
(mFrameRect.right - mFrameRect.left) / 2, Path.Direction.CCW);
Here is image in which I am drawing circle in rectangle which I want to achieve same with heart too.
The implementation be like you should retake the whole bitmap size(height, width) before resizing then max/min the size of that bitmap.

Android: canvas.drawText on a circle sides

I want to draw texts on the sides of a circle and another one below it. I edited the code in this answer but the problem is that the circle and arc are taking the whole space of the rect, which makes no space for the text to be drawn.
Here is my code
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// getHeight() is not reliable, use getMeasuredHeight() on first run:
// Note: mRect will also be null after a configuration change,
// so in this case the new measured height and width values will be used:
if (mRect == null) {
// take the minimum of width and height here to be on he safe side:
centerX = getMeasuredWidth() / 2;
centerY = getMeasuredHeight() / 2;
radius = Math.min(centerX, centerY);
// mRect will define the drawing space for drawArc()
// We have to take into account the STROKE_WIDTH with drawArc() as well as drawCircle():
// circles as well as arcs are drawn 50% outside of the bounds defined by the radius (radius for arcs is calculated from the rectangle mRect).
// So if mRect is too large, the lines will not fit into the View
int startTop = STROKE_WIDTH / 2;
int startLeft = startTop;
int endBottom = 2 * radius - startTop;
int endRight = endBottom;
mRect = new RectF(startTop, startLeft, endRight, endBottom);
}
// subtract half the stroke width from radius so the blue circle fits inside the View
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, mBasePaint);
// Or draw arc from degree 192 to degree 90 like this ( 258 = (360 - 192) + 90:
// canvas.drawArc(mRect, 192, 258, false, mBasePaint);
// draw an arc from 90 degrees to 192 degrees (102 = 192 - 90)
// Note that these degrees are not like mathematical degrees:
// they are mirrored along the y-axis and so incremented clockwise (zero degrees is always on the right hand side of the x-axis)
canvas.drawArc(mRect, 270, mTemp * 6, false, mDegreesPaint); // Each degree in the temp scale = 6 degrees on circle
canvas.drawArc(mRect, 270 + mSeparator * 6, 3, false, mSeparatorPaint); // The separator size = 3 degrees
// subtract stroke width from radius so the white circle does not cover the blue circle/ arc
canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, mCenterPaint);
drawCenter(canvas, mTextPaint, mTemp + "°");
canvas.drawText("Temp 1", mRect.centerX(), radius * 2, mTextPaint);
}
This code produces what I need as an arc and circles, but I'm not able to draw degrees on the circle sides and a text below it
Any help??

How to draw a partial round rect on a android canvas?

I want to draw on a canvas a round rectangle fill with color (or bitmap) and with a stroke but without some selected corners and also without the border on some selected sides. any ideas how i can achieve this ?
you can split the drawing process into two parts.
draw the fill area
when trying to draw a shape that is not support by the standard sdk APIs, Canvas.drawPath method will be a good way to do it.you can just define four variables to represent radiuses of four corners.
Path path = new Path();
Rect drawingRect = {the rect area you want to draw}
RectF topLeftArcBound = new RectF();
RectF topRightArcBound = new RectF();
RectF bottomLeftArcBound = new RectF();
RectF bottomRightArcBound = new RectF();
topRightArcBound.set(drawingRect.right - topRightRadius * 2, drawingRect.top, drawingRect.right, drawingRect.top + topRightRadius * 2);
bottomRightArcBound.set(drawingRect.right - bottomRightRadius * 2, drawingRect.bottom - bottomRightRadius * 2, drawingRect.right, drawingRect.bottom);
bottomLeftArcBound.set(drawingRect.left, drawingRect.bottom - bottomLeftRadius * 2, drawingRect.left + bottomLeftRadius * 2, drawingRect.bottom);
topLeftArcBound.set(drawingRect.left, drawingRect.top, drawingRect.left + topLeftRadius * 2, drawingRect.top + topLeftRadius * 2);
path.reset();
path.moveTo(drawingRect.left + topLeftRadius, drawingRect.top);
//draw top horizontal line
path.lineTo(drawingRect.right - topRightRadius, drawingRect.top);
//draw top-right corner
path.arcTo(topRightArcBound, -90, 90);
//draw right vertical line
path.lineTo(drawingRect.right, drawingRect.bottom - bottomRightRadius);
//draw bottom-right corner
path.arcTo(bottomRightArcBound, 0, 90);
//draw bottom horizontal line
path.lineTo(drawingRect.left - bottomLeftRadius, drawingRect.bottom);
//draw bottom-left corner
path.arcTo(bottomLeftArcBound, 90, 90);
//draw left vertical line
path.lineTo(drawingRect.left, drawingRect.top + topLeftRadius);
//draw top-left corner
path.arcTo(topLeftArcBound, 180, 90);
path.close();
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
and you can just set radius to zero for selected corners
draw border
border contains eight parts:
top-left corner
top line
top-right corner
right line
bottom-right corner
bottom line
bottom-left corner
left line
use a int value to contains selected parts will be a good idea
private static final int TOP_LEFT_CORNER = 0x1;
private static final int TOP_LINE = 0x2;
private static final int TOP_RIGHT_CORNER = 0x4;
private static final int RIGHT_LINE = 0x8;
private static final int BOTTOM_RIGHT_CORNER = 0x10;
private static final int BOTTOM_LINE = 0x20;
private static final int BOTTOM_LEFT_CORNER = 0x40;
private static final int LEFT_LINE = 0x80;
private int selectedParts = TOP_LEFT_CORNER | TOP_LINE | TOP_RIGHT_CORNER;
and now we can draw border based on selectedParts:
paint.setStyle(Paint.Style.STROKE);
if((selectedParts & TOP_LINE) > 0){
canvas.drawLine(drawingRect.left + topLeftRadius, drawingRect.top, drawingRect.right - topRightRadius, drawingRect.top);
}
if((selectedParts & TOP_RIGHT_CORNER) > 0){
canvas.drawArc(topRightArcBound, -90, 90, false, paint);
}
if((selectedParts & RIGHT_LINE) > 0){
canvas.drawLine(drawingRect.right, drawingRect.top + topRightRadius, drawingRect.right, drawingRect.bottom - bottomRightRadius, paint);
}
if((selectedParts & BOTTOM_RIGHT_CORNER) > 0){
canvas.drawArc(bottomRightArcBound, 0, 90, false, paint);
}
if((selectedParts & BOTTOM_LINE) > 0){
canvas.drawLine(drawingRect.right - bottomRightRadius, drawingRect.bottom. drawingRect.left + bottomLeftRadius, drawingRect.bottom, paint);
}
if((selectedParts & BOTTOM_LEFT_CORNER) > 0){
canvas.drawArc(bottomLeftArcBound, 90, 90, false, paint);
}
if((selectedParts & LEFT_LINE) > 0){
canvas.drawLine(drawingRect.left, drawingRect.bottom - bottomLeftRadius, drawingRect.left, drawingRect.top + topLeftRadius, paint);
}
if((selectedParts & TOP_LEFT_CORNER) > 0){
canvas.drawArc(topLeftArcBound, 180, 90, false, paint);
}

How to use android canvas to draw a Rectangle with only topleft and topright corners round?

I found a function for rectangles with all 4 corners being round, but I want to have just the top 2 corners round. What can I do?
canvas.drawRoundRect(new RectF(0, 100, 100, 300), 6, 6, paint);
For API 21 and above the Path class added a new method addRoundRect() which you can use it like this.
corners = new float[]{
80, 80, // Top left radius in px
80, 80, // Top right radius in px
0, 0, // Bottom right radius in px
0, 0 // Bottom left radius in px
};
final Path path = new Path();
path.addRoundRect(rect, corners, Path.Direction.CW);
canvas.drawPath(path, mPaint);
in Kotlin
val corners = floatArrayOf(
80f, 80f, // Top left radius in px
80f, 80f, // Top right radius in px
0f, 0f, // Bottom right radius in px
0f, 0f // Bottom left radius in px
)
val path = Path()
path.addRoundRect(rect, corners, Path.Direction.CW)
canvas.drawPath(path, mPaint)
Use a path. It has the advantage of working for APIs less than 21 (Arc is also limited thusly, which is why I quad). Which is a problem because not everybody has Lollipop yet. You can however specify a RectF and set the values with that and use arc back to API 1, but then you wouldn't get to use a static (without declaring a new object to build the object).
Drawing a rounded rect:
path.moveTo(right, top + ry);
path.rQuadTo(0, -ry, -rx, -ry);
path.rLineTo(-(width - (2 * rx)), 0);
path.rQuadTo(-rx, 0, -rx, ry);
path.rLineTo(0, (height - (2 * ry)));
path.rQuadTo(0, ry, rx, ry);
path.rLineTo((width - (2 * rx)), 0);
path.rQuadTo(rx, 0, rx, -ry);
path.rLineTo(0, -(height - (2 * ry)));
path.close();
As a full function:
static public Path RoundedRect(float left, float top, float right, float bottom, float rx, float ry, boolean conformToOriginalPost) {
Path path = new Path();
if (rx < 0) rx = 0;
if (ry < 0) ry = 0;
float width = right - left;
float height = bottom - top;
if (rx > width/2) rx = width/2;
if (ry > height/2) ry = height/2;
float widthMinusCorners = (width - (2 * rx));
float heightMinusCorners = (height - (2 * ry));
path.moveTo(right, top + ry);
path.rQuadTo(0, -ry, -rx, -ry);//top-right corner
path.rLineTo(-widthMinusCorners, 0);
path.rQuadTo(-rx, 0, -rx, ry); //top-left corner
path.rLineTo(0, heightMinusCorners);
if (conformToOriginalPost) {
path.rLineTo(0, ry);
path.rLineTo(width, 0);
path.rLineTo(0, -ry);
}
else {
path.rQuadTo(0, ry, rx, ry);//bottom-left corner
path.rLineTo(widthMinusCorners, 0);
path.rQuadTo(rx, 0, rx, -ry); //bottom-right corner
}
path.rLineTo(0, -heightMinusCorners);
path.close();//Given close, last lineto can be removed.
return path;
}
You'd want to line all the way to those corner bits, rather than quad across them. This is what setting true to conformToOriginalPost does. Just line to the control point there.
If you want to do that all but don't care about pre-Lollipop stuff, and urgently insist that if your rx and ry are high enough, it should draw a circle.
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
static public Path RoundedRect(float left, float top, float right, float bottom, float rx, float ry, boolean conformToOriginalPost) {
Path path = new Path();
if (rx < 0) rx = 0;
if (ry < 0) ry = 0;
float width = right - left;
float height = bottom - top;
if (rx > width/2) rx = width/2;
if (ry > height/2) ry = height/2;
float widthMinusCorners = (width - (2 * rx));
float heightMinusCorners = (height - (2 * ry));
path.moveTo(right, top + ry);
path.arcTo(right - 2*rx, top, right, top + 2*ry, 0, -90, false); //top-right-corner
path.rLineTo(-widthMinusCorners, 0);
path.arcTo(left, top, left + 2*rx, top + 2*ry, 270, -90, false);//top-left corner.
path.rLineTo(0, heightMinusCorners);
if (conformToOriginalPost) {
path.rLineTo(0, ry);
path.rLineTo(width, 0);
path.rLineTo(0, -ry);
}
else {
path.arcTo(left, bottom - 2 * ry, left + 2 * rx, bottom, 180, -90, false); //bottom-left corner
path.rLineTo(widthMinusCorners, 0);
path.arcTo(right - 2 * rx, bottom - 2 * ry, right, bottom, 90, -90, false); //bottom-right corner
}
path.rLineTo(0, -heightMinusCorners);
path.close();//Given close, last lineto can be removed.
return path;
}
So,
conformToOriginalPost actually draws a rounded rect without the bottom two bits rounded.
I would draw two rectangles:
canvas.drawRect(new RectF(0, 110, 100, 290), paint);
canvas.drawRoundRect(new RectF(0, 100, 100, 200), 6, 6, paint);
Or something like that, you just overlap them so that the upper corners will be round. Preferably you should write a method for this
I changed this answer so you can set which corner you want to be round and which one you want to be sharp. also works on pre-lolipop
Usage Example:
only top-right and botton-right corners are rounded
Path path = RoundedRect(0, 0, fwidth , fheight , 5,5,
false, true, true, false);
canvas.drawPath(path,myPaint);
RoundRect:
public static Path RoundedRect(
float left, float top, float right, float bottom, float rx, float ry,
boolean tl, boolean tr, boolean br, boolean bl
){
Path path = new Path();
if (rx < 0) rx = 0;
if (ry < 0) ry = 0;
float width = right - left;
float height = bottom - top;
if (rx > width / 2) rx = width / 2;
if (ry > height / 2) ry = height / 2;
float widthMinusCorners = (width - (2 * rx));
float heightMinusCorners = (height - (2 * ry));
path.moveTo(right, top + ry);
if (tr)
path.rQuadTo(0, -ry, -rx, -ry);//top-right corner
else{
path.rLineTo(0, -ry);
path.rLineTo(-rx,0);
}
path.rLineTo(-widthMinusCorners, 0);
if (tl)
path.rQuadTo(-rx, 0, -rx, ry); //top-left corner
else{
path.rLineTo(-rx, 0);
path.rLineTo(0,ry);
}
path.rLineTo(0, heightMinusCorners);
if (bl)
path.rQuadTo(0, ry, rx, ry);//bottom-left corner
else{
path.rLineTo(0, ry);
path.rLineTo(rx,0);
}
path.rLineTo(widthMinusCorners, 0);
if (br)
path.rQuadTo(rx, 0, rx, -ry); //bottom-right corner
else{
path.rLineTo(rx,0);
path.rLineTo(0, -ry);
}
path.rLineTo(0, -heightMinusCorners);
path.close();//Given close, last lineto can be removed.
return path;
}
you can easily achieve this by using Path:
val radiusArr = floatArrayOf(
15f, 15f,
15f, 15f,
0f, 0f,
0f, 0f
)
val myPath = Path()
myPath.addRoundRect(
RectF(0f, 0f, 400f, 400f),
radiusArr,
Path.Direction.CW
)
canvas.drawPath(myPath, paint)
Simple helper function written in Kotlin.
private fun Canvas.drawTopRoundRect(rect: RectF, paint: Paint, radius: Float) {
// Step 1. Draw rect with rounded corners.
drawRoundRect(rect, radius, radius, paint)
// Step 2. Draw simple rect with reduced height,
// so it wont cover top rounded corners.
drawRect(
rect.left,
rect.top + radius,
rect.right,
rect.bottom,
paint
)
}
Usage:
canvas.drawTopRoundRect(rect, paint, radius)
public static Path composeRoundedRectPath(RectF rect, float topLeftDiameter, float topRightDiameter,float bottomRightDiameter, float bottomLeftDiameter){
Path path = new Path();
topLeftDiameter = topLeftDiameter < 0 ? 0 : topLeftDiameter;
topRightDiameter = topRightDiameter < 0 ? 0 : topRightDiameter;
bottomLeftDiameter = bottomLeftDiameter < 0 ? 0 : bottomLeftDiameter;
bottomRightDiameter = bottomRightDiameter < 0 ? 0 : bottomRightDiameter;
path.moveTo(rect.left + topLeftDiameter/2 ,rect.top);
path.lineTo(rect.right - topRightDiameter/2,rect.top);
path.quadTo(rect.right, rect.top, rect.right, rect.top + topRightDiameter/2);
path.lineTo(rect.right ,rect.bottom - bottomRightDiameter/2);
path.quadTo(rect.right ,rect.bottom, rect.right - bottomRightDiameter/2, rect.bottom);
path.lineTo(rect.left + bottomLeftDiameter/2,rect.bottom);
path.quadTo(rect.left,rect.bottom,rect.left, rect.bottom - bottomLeftDiameter/2);
path.lineTo(rect.left,rect.top + topLeftDiameter/2);
path.quadTo(rect.left,rect.top, rect.left + topLeftDiameter/2, rect.top);
path.close();
return path;
}
I achieved this by following the below steps.
These are the pre-requisites for the rounded rectangle to look neat
The radius of the edges have to be equal to the (height of the rectangle / 2). This is because if its any different value then the place where the curve meets straight line of the rectangle will not be
Next is the steps to draw the rounded rectangle.
First we draw 2 circles on the left and right side, with the radius = height of rectange / 2
Then we draw a rectangle between these circles to get the desired rounded rectangle.
I am posting the code below
private void drawRoundedRect(Canvas canvas, float left, float top, float right, float bottom) {
float radius = getHeight() / 2;
canvas.drawCircle(radius, radius, radius, mainPaint);
canvas.drawCircle(right - radius, radius, radius, mainPaint);
canvas.drawRect(left + radius, top, right - radius, bottom, mainPaint);
}
Now this results in a really nice rounded rectangle like the one shown below
This is an old question, however I wanted to add my solution because it uses the native SDK without lots of custom code or hacky drawing. This solution is supported back to API 1.
The way to do this properly is to create a path (as mentioned in other answers) however the previous answers seem to overlook the addRoundedRect function call that takes radii for each corner.
Variables
private val path = Path()
private val paint = Paint()
Setup Paint
paint.color = Color.RED
paint.style = Paint.Style.FILL
Update Path with Size Changes
Call this somewhere that isn't onDraw, such as onMeasure for a view or onBoundChange for a drawable. If it doesn't change (like this example) you could put this code where you set up your paint.
val radii = floatArrayOf(
25f, 25f, //Top left corner
25f, 25f, //Top right corner
0f, 0f, //Bottom right corner
0f, 0f, //Bottom left corner
)
path.reset() //Clears the previously set path
path.addRoundedRect(0f, 0f, 100f, 100f, radii, Path.Direction.CW)
This code creates a 100x100 rounded rect with the top corners rounded with a 25 radius.
Draw Path
Call this in onDraw for a view or draw for a drawable.
canvas.drawPath(path, paint)
A Path#arcTo() version to draw the rounded side if the radius is half of the height.
fun getPathOfRoundedRectF(
rect: RectF,
topLeftRadius: Float = 0f,
topRightRadius: Float = 0f,
bottomRightRadius: Float = 0f,
bottomLeftRadius: Float = 0f
): Path {
val tlRadius = topLeftRadius.coerceAtLeast(0f)
val trRadius = topRightRadius.coerceAtLeast(0f)
val brRadius = bottomRightRadius.coerceAtLeast(0f)
val blRadius = bottomLeftRadius.coerceAtLeast(0f)
with(Path()) {
moveTo(rect.left + tlRadius, rect.top)
//setup top border
lineTo(rect.right - trRadius, rect.top)
//setup top-right corner
arcTo(
RectF(
rect.right - trRadius * 2f,
rect.top,
rect.right,
rect.top + trRadius * 2f
), -90f, 90f
)
//setup right border
lineTo(rect.right, rect.bottom - trRadius)
//setup bottom-right corner
arcTo(
RectF(
rect.right - brRadius * 2f,
rect.bottom - brRadius * 2f,
rect.right,
rect.bottom
), 0f, 90f
)
//setup bottom border
lineTo(rect.left + blRadius, rect.bottom)
//setup bottom-left corner
arcTo(
RectF(
rect.left,
rect.bottom - blRadius * 2f,
rect.left + blRadius * 2f,
rect.bottom
), 90f, 90f
)
//setup left border
lineTo(rect.left, rect.top + tlRadius)
//setup top-left corner
arcTo(
RectF(
rect.left,
rect.top,
rect.left + tlRadius * 2f,
rect.top + tlRadius * 2f
),
180f,
90f
)
close()
return this
}
}
One simple and efficient way to draw a solid side is to use clipping - rect clipping is essentially free, and a lot less code to write than a custom Path.
If I want a 300x300 rect, with the top left and right rounded by 50 pixels, you can do:
canvas.save();
canvas.clipRect(0, 0, 300, 300);
canvas.drawRoundRect(new RectF(0, 0, 300, 350), 50, 50, paint);
canvas.restore();
This approach will only work for rounding on 2 or 3 adjacent corners, so it's a little less configurable than a Path based approach, but using round rects is more efficient, since drawRoundRect() is fully hardware accelerated (that is, tessellated into triangles) while drawPath() always falls back to software rendering (software-draw a path bitmap, and upload that to be cached on the GPU).
Not a huge performance issue for small infrequent drawing, but if you're animating paths, the cost of software draw can make your frame times longer, and increase your chance to drop frames. The path mask also costs memory.
If you do want to go with a Path-based approach, I'd recommend using GradientDrawable to simplify the lines of code (assuming you don't need to set a custom shader, e.g. to draw a Bitmap).
mGradient.setBounds(0, 0, 300, 300);
mGradient.setCornerRadii(new int[] {50,50, 50,50, 0,0, 0,0});
With GradientDrawable#setCornerRadii(), you can set any corner to be any roundedness, and reasonably animate between states.
Here is my answer to the above question. Here, I have created Kotlin extension function which uses Path along with the quadTo function which can be used in lower-level APIs also.
fun Canvas.drawRoundRectPath(
rectF: RectF,
radius: Float,
roundTopLeft: Boolean,
roundTopRight: Boolean,
roundBottomLeft: Boolean,
roundBottomRight: Boolean,
paint: Paint) {
val path = Path()
//Move path cursor to start point
if (roundBottomLeft) {
path.moveTo(rectF.left, rectF.bottom - radius)
} else {
path.moveTo(rectF.left, rectF.bottom)
}
// drawing line and rounding top left curve
if (roundTopLeft) {
path.lineTo(rectF.left, rectF.top + radius)
path.quadTo(rectF.left, rectF.top, rectF.left + radius, rectF.top)
} else {
path.lineTo(rectF.left, rectF.top)
}
// drawing line an rounding top right curve
if (roundTopRight) {
path.lineTo(rectF.right - radius, rectF.top)
path.quadTo(rectF.right, rectF.top, rectF.right, rectF.top + radius)
} else {
path.lineTo(rectF.right, rectF.top)
}
// drawing line an rounding bottom right curve
if (roundBottomRight) {
path.lineTo(rectF.right, rectF.bottom - radius)
path.quadTo(rectF.right, rectF.bottom, rectF.right - radius, rectF.bottom)
} else {
path.lineTo(rectF.right, rectF.bottom)
}
// drawing line an rounding bottom left curve
if (roundBottomLeft) {
path.lineTo(rectF.left + radius, rectF.bottom)
path.quadTo(rectF.left, rectF.bottom, rectF.left, rectF.bottom - radius)
} else {
path.lineTo(rectF.left, rectF.bottom)
}
path.close()
drawPath(path, paint)
}
We can call the function with canvas object and pass the RectF with the dimension on which we want to apply the curve.
Also, we can pass the boolean for the corners which we want to round.
This answer can further be customized to accept radius for individual corners.
You can draw that piece by piece using drawLine() and drawArc() functions from the Canvas.
Maybe the following code can help you
Paint p = new Paint();
p.setColor(color);
float[] corners = new float[]{
15, 15, // Top, left in px
15, 15, // Top, right in px
15, 15, // Bottom, right in px
15, 15 // Bottom,left in px
};
final Path path = new Path();
path.addRoundRect(rect, corners, Path.Direction.CW);
// Draw
canvas.drawPath(path, p);
Use PaintDrawable could be better:
val topLeftRadius = 10
val topRightRadius = 10
val bottomLeftRadius = 0
val bottomRightRadius = 0
val rect = Rect(0, 0, 100, 100)
val paintDrawable = PaintDrawable(Color.RED)
val outter = floatArrayOf(topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomLeftRadius, bottomLeftRadius, bottomRightRadius, bottomRightRadius)
paintDrawable.setCornerRadii(outter)
paintDrawable.bounds = rect
paintDrawable.draw(canvas)
draw round rect with left rounded corners
private void drawRoundRect(float left, float top, float right, float bottom, Paint paint, Canvas canvas) {
Path path = new Path();
path.moveTo(left, top);
path.lineTo(right, top);
path.lineTo(right, bottom);
path.lineTo(left + radius, bottom);
path.quadTo(left, bottom, left, bottom - radius);
path.lineTo(left, top + radius);
path.quadTo(left, top, left + radius, top);
canvas.drawPath(path, onlinePaint);
}

Categories

Resources