Drawing Rectangle View with Curved Bottom in Android
Introduction
This article explores the creation of a custom rectangle view in Android with a curved bottom edge. We’ll leverage the power of Canvas and Path classes to achieve this visually appealing effect.
Creating the Custom View
1. Defining the Custom View Class
“`java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class CurvedBottomRectangleView extends View {
private Paint paint;
private Path path;
private int rectWidth;
private int rectHeight;
private float curveRadius;
public CurvedBottomRectangleView(Context context) {
super(context);
init();
}
public CurvedBottomRectangleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CurvedBottomRectangleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(getResources().getColor(android.R.color.holo_blue_light)); // Set your desired color
path = new Path();
rectWidth = 100; // Default width
rectHeight = 50; // Default height
curveRadius = 15; // Default curve radius
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.reset();
path.moveTo(0, 0);
path.lineTo(rectWidth, 0);
path.lineTo(rectWidth, rectHeight – curveRadius);
RectF oval = new RectF(rectWidth – 2 * curveRadius, rectHeight – 2 * curveRadius, rectWidth, rectHeight);
path.arcTo(oval, 0, 90); // Draw the curved bottom
path.lineTo(0, curveRadius);
path.close();
canvas.drawPath(path, paint);
}
public void setRectWidth(int rectWidth) {
this.rectWidth = rectWidth;
invalidate();
}
public void setRectHeight(int rectHeight) {
this.rectHeight = rectHeight;
invalidate();
}
public void setCurveRadius(float curveRadius) {
this.curveRadius = curveRadius;
invalidate();
}
}
“`
2. Using the Custom View in Layout
“`xml
“`
Customization
1. Setting Color, Width, Height, and Curve Radius
* **Color:** Set the `paint.setColor()` method in `init()` to change the fill color of the rectangle.
* **Width and Height:** Use the `setRectWidth()` and `setRectHeight()` methods to modify the rectangle’s dimensions.
* **Curve Radius:** Utilize the `setCurveRadius()` method to adjust the roundness of the bottom curve.
2. Adding a Background
* To add a background color to the rectangle, set a background color for the `CurvedBottomRectangleView` in your layout XML.
Code Example
“`java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class CurvedBottomRectangleView extends View {
private Paint paint;
private Path path;
private int rectWidth;
private int rectHeight;
private float curveRadius;
public CurvedBottomRectangleView(Context context) {
super(context);
init();
}
public CurvedBottomRectangleView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CurvedBottomRectangleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(getResources().getColor(android.R.color.holo_blue_light)); // Set your desired color
path = new Path();
rectWidth = 100; // Default width
rectHeight = 50; // Default height
curveRadius = 15; // Default curve radius
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.reset();
path.moveTo(0, 0);
path.lineTo(rectWidth, 0);
path.lineTo(rectWidth, rectHeight – curveRadius);
RectF oval = new RectF(rectWidth – 2 * curveRadius, rectHeight – 2 * curveRadius, rectWidth, rectHeight);
path.arcTo(oval, 0, 90); // Draw the curved bottom
path.lineTo(0, curveRadius);
path.close();
canvas.drawPath(path, paint);
}
public void setRectWidth(int rectWidth) {
this.rectWidth = rectWidth;
invalidate();
}
public void setRectHeight(int rectHeight) {
this.rectHeight = rectHeight;
invalidate();
}
public void setCurveRadius(float curveRadius) {
this.curveRadius = curveRadius;
invalidate();
}
}
“`
“`xml
“`
Conclusion
By combining Canvas, Path, and RectF, you can easily create visually appealing rectangle views with curved bottoms in your Android applications. This customization empowers you to design attractive UI elements that stand out.