Draw a circle as an overlay within a frame layout

Question

I have a frame layout (full screen) that acts as a container for another frame layout which shows the camera preview. Now I want to show on top of the camera preview a circle of a given radius. The radius shall change as a function of some properties of the current preview image.

I know that I can add some (semi-transparent) layouts "on top" of the frame layout I use for the camera preview, but I am not sure how to best show this "overlay" circle. The circle shall be centered, have a solid line but not be filled, i.e. be transparent and also its background shall be transparent.

So I can use a drawable, that is created programmatically and show it on top of the current activity - as simple? I.e. I do not need to "integrate" it into the xml. Layout logic? — Settembrini, Jan 31 '16 at 01:20

score 1 · Accepted Answer · answered Jan 31 '16 at 06:26

You can make your own View class inside your existing Activity class. Here is my class.

class CanvasView extends View {

    private Paint paint;

    public CanvasView(Context context){
        super(context);
        //Customize your own properties
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10f);
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        canvas.drawCircle(enter coords and radius here);
    }


}

You can call the onDraw method from within that class by calling the invalidate() method..

Here is how you can add it to your layout.. Assuming you declared a CanvasView class, called drawable, and have your Framelayout, called main_layout, you add it to your existing framelayout by doing...

 CanvasView drawable = new CanvasView(getApplicationContext());
 RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
 main_layout.addView(drawable, params);

Hope this works!

You should change RelativeLayout.LayoutParams to FrameLayout.LayoutParams.... Same goes to the other side :) — drew, Jan 31 '16 at 06:27
Just as an Addition: since the circle shall depend on the current camera preview (i.e. show just one circle at at time) I had to include in the Activity Class a class variable (CanvasView) last_drawable and set this to last_drawable =drawable just after adding the last .addView() Statement. Then I could use ((ViewManager)last_drawable.getParent()).removeView(last_drawable) in order to remove the last circle, before drawing a new one. — Settembrini, Jan 31 '16 at 17:48

Draw a circle as an overlay within a frame layout

1 Answers1