Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Draw shapes using canvas in Android

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.73k
    Comment on it

    We can create custom view by extending View class. The most important part of custom view is its appearance. We can give any shape to a custom view by overriding onDraw(Canvas canvas) method. Canvas class provide us many method which help us to draw any time of shape. For draw anything via Canvas class we need the object of Paint class.

    Paint paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(1);
    

    Example of some of the methods of Canvas class
    // to draw a rectangle

    canvas.drawRect(startX, startY, width, height, paint);
    

    where
    startX: The left side of the rectangle to be drawn
    startY: The top side of the rectangle to be drawn
    width: The right side of the rectangle to be drawn
    height: The bottom side of the rectangle to be drawn
    paint: The paint used to draw the rect
    // to draw a oval

    canvas.drawOval (float left, float top, float right, float bottom, Paint paint)
    

    // to draw a circle

    canvas.drawCircle (float cx, float cy, float radius, Paint paint)
    

    where
    cx: The x-coordinate of the center of the cirle to be drawn
    cy: The y-coordinate of the center of the cirle to be drawn
    radius: The radius of the cirle to be drawn
    paint: The paint used to draw the circle
    // to draw a line

    canvas.drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
    

    where
    startX: The x-coordinate of the start point of the line
    startY: The y-coordinate of the start point of the line
    stopX: The x-coordinate of the end point of the line
    stopY: The y-coordinate of the end point of the line
    paint: The paint used to draw line

    Example of drawing a Matrix in a custom view
    Create a custom view with the name "DrawMatrix"

    public class DrawMatrix extends View implements KeyInterface {
    
        private final int startX = 10, startY = 20, width = 330, height = 350;
    
        public int getRow() {
            return row;
        }
    
        public void setRow(int row) {
            this.row = row;
        }
    
        public int getColumn() {
            return column;
        }
    
        public void setColumn(int column) {
            this.column = column;
        }
    
        private int row = 3, column = 3;
        Paint paint = new Paint();
    
        public DrawMatrix(Context context, int row, int column) {
            super(context);
            // this.whichMatrix = whichMatrix;
            this.row = row;
            this.column = column;
        }
    
    
        private void drawRectangle(Canvas canvas) {
            canvas.drawRect(startX, startY, width, height, paint);
        }
    
        private void drawHorizontalLine(Canvas canvas, int no) {
            for (int i = 1; i < no; i++) {
                canvas.drawLine(startX, i * (height / no) + 10, width, i * (height / no) + 10, paint);
            }
        }
    
        private void drawVerticalLine(Canvas canvas, int no) {
            for (int i = 1; i < no; i++) {
                canvas.drawLine(i * (width / no) + 10, startY, i * (width / no) + 10, height, paint);
            }
        }
    
        @Override
        public void onDraw(Canvas canvas) {
            paint.setColor(Color.WHITE);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(1);
            drawRectangle(canvas);
            drawHorizontalLine(canvas, row);
            drawVerticalLine(canvas, column);
    
        }
    
    }
    

    Then use this custom view in your activity like this:-

     private DrawMatrix drawMatrix;
    // initialize drawMatrix inside onCreate method
    drawMatrix = new DrawMatrix(this, 3, 3); // creating 3*3 Matrix
    // add drawMatrix in your view or the container
    matrixContainer.addView(drawMatrix); // here matrixContainer is any layout that hold your custom view
    

    To redraw again:-

    drawMatrix.setRow(8);
    drawMatrix.setColumn(5);
    drawMatrix.invalidate();
    

    The above code will redraw matrix of 8*5 order

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: