Exploring Android Canvas Drawing— For Shapes, Bitmaps andCustom views.

Mayuri Khinvasara
Jan 9 · 6 min read

So what exactly is Android Canvas ?

Your mobile screen is your canvas

Create your own custom view class

public class CustomView extends View {

public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
}
// defines paint and canvas
private Paint drawPaint;

// Setup paint with color and stroke styles
private void setupPaint() {
drawPaint = new Paint();
drawPaint.setColor(Color.BLUE);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(5);
drawPaint.setStyle(Paint.Style.FILL_AND_STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);

setupPaint();
}

The magic methods : onDraw() and invalidate()

private Canvas canvas;@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
canvas.invalidate();

Drawing basics

Draw Line

Path path = new Path();
path.moveTo(x1, y1);
path.lineTo(x2, y2);
path.close();
canvas.drawPath(path, drawPaint);

Draw Circle

canvas.drawCircle(xCordinate, yCordinate, RADIUS, drawPaint);

Draw Rectangle

public void drawRectangle(int x, int y) {
drawPaint.setColor(Color.RED);
Rect rectangle = new Rect((int) (x - ((0.8) * RADIUS)), (int) (y - ((0.6) * RADIUS)), (int) (x + ((0.8) * RADIUS)), (int) (y + ((0.6 * RADIUS)))); canvas.drawRect(rectangle, drawPaint);
}

Draw Square

double squareSideHalf = 1 / Math.sqrt(2);
//Consider pivot x,y as centroid.

public void drawRectangle(int x, int y) {
drawPaint.setColor(Color.RED);
Rect rectangle = new Rect((int) (x - (squareSideHalf * RADIUS)), (int) (y - (squareSideHalf * RADIUS)), (int) (x + (squareSideHalf * RADIUS)), (int) (y + ((squareSideHalf * RADIUS))));
canvas.drawRect(rectangle, drawPaint);
}

Getting tougher : Draw Triangle ()

/*
Select three vertices of triangle. Draw 3 lines between them to form a triangle
*/
public void drawTriangle(int x, int y, int width) {
drawPaint.setColor(Color.GREEN);
int halfWidth = width / 2;

Path path = new Path();
path.moveTo(x, y - halfWidth); // Top
path.lineTo(x - halfWidth, y + halfWidth); // Bottom left
path.lineTo(x + halfWidth, y + halfWidth); // Bottom right
path.lineTo(x, y - halfWidth); // Back to Top
path.close();
canvas.drawPath(path, drawPaint);
}

Update Canvas

private void upDateCanvas(Shape shape) {
//your business logic for shapes creation etc here
canvas.invalidate();
}

View or SurfaceView ?

Draw different shapes on canvas. Full source code available here on github

Mayuri Khinvasara

Written by

Android Developer 💙 | Learner, Speaker and Writer | Leading GDG & Women Techmakers Pune | Passionate about technology, community | Curious Student for life !

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade