How to draw a rectangle in android when a user moves finger?

Question

I want to draw a rectangle. The first corner should be the point where user first touches screen. When user moves his finger, it should draw the rectangle. Here's a link that shows a video what I want to do. But I don't understand it and maybe You can help me. I just want to draw that rectangle on a white background not on an image.

My code :

package com.example.androiddrawing;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CanvasView extends View {

    private Canvas canvas;
    private Paint paint = new Paint();
    private Paint paint2 = new Paint();
    private Paint paint3 = new Paint();
    private Path path = new Path();
    private Point point = new Point();
    private static List<Path> lines = new ArrayList<Path>();
    private static List<Point> points = new ArrayList<Point>();
    private float x, x2, xc, xd, x3, x4;
    private float y, y2, yc, yd, y3, y4;
    private boolean touchStarted = false;

    public enum DrawMode {
        FreeDrawMode, RectDrawMode
    };

    public static DrawMode currentDrawMode;

    public void setDrawMode(DrawMode newDrawMode) {
        this.currentDrawMode = newDrawMode;
    }

    public CanvasView(Context context, AttributeSet attrs) {
        super(context, attrs);

        paint.setAntiAlias(true);
        paint.setStrokeWidth(5);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);

        paint2.setAntiAlias(true);
        paint2.setStrokeWidth(5);
        paint2.setColor(Color.RED);
        paint2.setStyle(Paint.Style.STROKE);
        paint2.setStrokeJoin(Paint.Join.ROUND);

        paint3.setAntiAlias(true);
        paint3.setColor(Color.BLACK);
        paint3.setStrokeWidth(10);
        paint3.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        for (Path p : lines)
            canvas.drawPath(p, paint);
        canvas.drawPath(path, paint2);

        for (Point point : points)
            canvas.drawCircle(point.x, point.y, 0, paint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        x = event.getX();
        y = event.getY();

        System.out.println(currentDrawMode);
        if (currentDrawMode == DrawMode.FreeDrawMode) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // Set a new starting point
                paint2.setColor(Color.RED);
                path = new Path();
                path.moveTo(x, y);
                touchStarted = true;


                break;
            // return true;
            case MotionEvent.ACTION_MOVE:
                // Connect the points
                touchStarted = false;
                path.lineTo(x, y);

                break;
            case MotionEvent.ACTION_UP:
                if (touchStarted) {
                    point = new Point();
                    point.x = (int) x;
                    point.y = (int) y;
                    paint2.setColor(Color.BLACK);
                    points.add(point);
                    touchStarted = false;
                    System.out.println("siin");
                } else {
                    System.out.println("seal");
                    paint2.setColor(Color.BLACK);
                    lines.add(path);
                }
                break;
            default:
                return false;
            }
        } else if (currentDrawMode == DrawMode.RectDrawMode) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // Set a new starting point
                paint3.setColor(Color.RED);
            //CODE HERE

                break;
            // return true;
            case MotionEvent.ACTION_MOVE:

                //CODE HERE


                break;
            case MotionEvent.ACTION_UP:

                    //CODE HERE


                break;
            default:
                return false;
            }
        }
        // Makes our view repaint and call onDraw
        invalidate();
        return true;
    }

}

I should write the code where I put the comments //CODE HERE, but I really don't understand, how do I have to draw a rectangle.

score 7 · Answer 1 · edited Nov 10 '16 at 06:12

You can use the below code. Hope this helps you.

public class DrawSample extends View {

int mStartX;
int mStartY;
int mEndX;
int mEndY;

Paint mPaint = new Paint();

int mSelectedColor = Color.BLACK;

public DrawSample(Context context, AttributeSet attrs, int defStyle) {

    super(context, attrs, defStyle);

    mPaint.setColor(mSelectedColor);
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.STROKE);

    setFocusable(true);
}

public DrawSample(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getActionMasked()) {

        case MotionEvent.ACTION_DOWN:

            mStartX = (int) event.getX();
            mStartY = (int) event.getY();

            break;

        case MotionEvent.ACTION_MOVE:

            mEndX = (int) event.getX();
            mEndY = (int) event.getY();

            invalidate();

            break;

        case MotionEvent.ACTION_UP:


            mEndX = (int) event.getX();
            mEndY = (int) event.getY();

            invalidate();

            break;

        default:

            super.onTouchEvent(event);

            break;
    }

    return true;
}

@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    canvas.drawRect(mStartX, mStartY, mEndX, mEndY, mPaint);
}
}

score 0 · Answer 2 · edited May 23 '17 at 12:33

You need to keep the start X and Y points, then, when user stop drawing in the MotionEvent.ACTION_UP get the ending X and Y to get 4 corners of the rectangle:

canvas.drawRect(startX, startY, x, y, paint3);

You can find more info about drawRect here and here.

EDIT i dont have nice environment to test it... but I found some errors in your answer:

else if (currentDrawMode == DrawMode.RectDrawMode) {

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // Set a new starting point
            paint3.setColor(Color.RED);
            startX = event.getX();
            startY = event.getY();

            break;
        // return true;
        case MotionEvent.ACTION_MOVE:

            endX = event.getX();
            endY = event.getY();

            canvas.drawRect(startX, startY, endX, endY, paint3);

            //invalidate(); // Tell View that the canvas needs to be redrawn
            break;
        case MotionEvent.ACTION_UP:

            paint3.setColor(Color.BLACK);
            canvas.drawRect(startX, startY, endX, endY, paint3);

            break;
        default:
            return false;
        }

PS: if you want add info to your question edit it, but dont post new answers!!!

Answered in comment. I have seen these links You posted, but they don't draw a rectangle when user moves his finger. I know how to draw it when I give specific coordinates to it, but not how to do it when I move my finger. I should delete the old rectangle every time I move my finger and then draw a new one. — mrtn, Nov 11 '14 at 17:12
If you want *"real time"* simulation, you just need to reassign X and Y values to same rectangle to redraw it and simulate animation. — Jordi Castilla, Nov 11 '14 at 17:14
Hmm, when I put System.out.println in every case, then it prints out them, but no rectangle is drawn. — mrtn, Nov 11 '14 at 17:37

How to draw a rectangle in android when a user moves finger?

2 Answers2