How to draw a rectangle with black border and background transparent on Imageview?

Question

I would like to draw a rectangle on an ImageView as a picture below (black border and transparent as background). Basically I download an Image, put in in a ImageView and after I receive 4 points to draw a rectangle. Thanks in advance

Answer 1

Your problem for android.view.InflateException can be solved by deleting the constructors from DrawView class and auto generate them again. Now for the rectangle you have to have the onDraw similar like this:

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Paint paint = new Paint();
    paint.setColor(Color.TRANSPARENT);
    paint.setStyle(Paint.Style.FILL);
    float leftx = 50;
    float topy =  50;
    float rightx =  150;
    float bottomy =  150;
    // FILL
    canvas.drawRect(leftx, topy, rightx, bottomy, paint);

    paint.setStrokeWidth(10);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    // BORDER
    canvas.drawRect(leftx, topy, rightx, bottomy, paint);
}

If you want to get the coordinates on click an then draw the rectangle override the onTouchEvent method and do something like this

class DrawView extends ImageView {

    float x, y;
    float width = 60.0f;
    float height = 50.0f;
    boolean touched = false;

    public DrawView(Context context) {
        super(context);
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        if (touched) {
            Paint paint = new Paint();
            paint.setColor(Color.TRANSPARENT);
            paint.setStyle(Paint.Style.FILL);
            // FILL
            canvas.drawRect(x, y, (x + width) / 0.5f, (y + height) / 0.5f, paint);

            paint.setStrokeWidth(10);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.STROKE);
            // BORDER
            canvas.drawRect(x, y, (x + width) / 0.5f, (y + height) / 0.5f, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        touched = true;
        //getting the touched x and y position
        x = event.getX();
        y = event.getY();
        invalidate();
        return true;
    }

}

Answer 2

I solved my problem in thanks the help of @vasilis.

I created:

class DrawView extends ImageView {
   private int numberOfRectangles=0;
   private ArrayList<Rectangles> listRect;
   public DrawView(Context context) {
       super(context);
   }
   public DrawView(Context context, AttributeSet attrs) {
       super(context, attrs);
   }
   public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
   }

   @Override
   public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (numberOfRectangles> 0 && listRect!= null)
    {
        for (int i=0; i< numberOfRectangles; i++)
        {
            Paint paint = new Paint();
            paint.setColor(Color.TRANSPARENT);
            paint.setStyle(Paint.Style.FILL);
            float leftx = listRect.get(i).getLeftx();
            float topy = listRect.get(i).getTopy();
            float rightx = listRect.get(i).getRightx();
            float bottomy = listRect.get(i).getBottomy();
            // FILL
            canvas.drawRect(leftx, topy, rightx, bottomy, paint);

            paint.setStrokeWidth(10);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.STROKE);
            // BORDER
            canvas.drawRect(leftx, topy, rightx, bottomy, paint);
        }
    }
}
 public void creatRectangles(ArrayList<Rectangles> arrayRettangoliTest) {
    numberOfRectangles=arrayRettangoliTest.size();
    this.listRect= arrayRettangoliTest;
    this.invalidate();
  }

}

in my xml file:

 <it.path.DrawView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder" />

I create a Class Rectangles:

public class Rectangles {
   private float leftx;
   private float topy ;
   private float rightx;
   private float bottomy;

    public Rectangles(float leftx, float topy, float rightx, float bottomy)      {
        this.leftx = leftx;
        this.topy = topy;
        this.rightx = rightx;
        this.bottomy = bottomy;
    }

    @Override
    public String toString() {
        return "Rectangles{" +
            "leftx=" + leftx +
            ", topy=" + topy +
            ", rightx=" + rightx +
            ", bottomy=" + bottomy +
            '}';
    }

    public void setLeftx(float leftx) {
        this.leftx = leftx;
    }

    public void setTopy(float topy) {
        this.topy = topy;
    }

    public void setRightx(float rightx) {
        this.rightx = rightx;
    }

    public void setBottomy(float bottomy) {
        this.bottomy = bottomy;
    }

    public float getLeftx() {
        return leftx;
    }

    public float getTopy() {
        return topy;
    }

    public float getRightx() {
       return rightx;
    }

    public float getBottomy() {
        return bottomy;
   }

}

And in my MainActivity (ex after an onClick()):

  ...
  ArrayList<Rectangles> arrayRectanglesTest= new ArrayList<>(4);
  arrayRectanglesTest.add(new Rectangles(50, 50, 100, 100));
  arrayRectanglesTest.add(new Rectangles(150, 150, 200, 200));
  arrayRectanglesTest.add(new Rectangles(250, 250, 300, 300));
  arrayRectanglesTest.add(new Rectangles(350, 350, 400, 400));
  arrayRectanglesTest.add(new Rectangles(450, 450, 500, 500));
  imageView.creatRectangles(arrayRectanglesTest);
  ...

So I made dynamic the number of rectangles here the Result