Home » Android » android – How to add a rectangular overlay in a camera application?

android – How to add a rectangular overlay in a camera application?

Posted by: admin June 15, 2020 Leave a comment

Questions:

How do I add a rectangular overlay (which should be more like a rectangular frame) in the camera preview? My application consists of a button that opens the camera upon clicking.
I need the overlay in that camera preview.

The code for the java file is:

    public class MainActivity extends Activity {
     Button b;
     Intent i;
     Bitmap bmp;
     final static int cameraData = 0;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         b = (Button) findViewById(R.id.button);
         InputStream is = getResources().openRawResource(R.drawable.ic_launcher);
         bmp = BitmapFactory.decodeStream(is);
         b.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
            // TODO Auto-generated method stub
            i = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
            startActivityForResult(i, cameraData);

        }
    });
 }
}

The Layout file is as follows:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:text="click to take photo" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="click"
    android:layout_gravity="center" />

</LinearLayout>
How to&Answers:

You have to create your own Preview by extending the SurfaceView class.

See below link which helps you.

Custom camera android

Take FrameLayout with SurfaceView as child.and customise as per your needs

Answer:

First, create a public Class that extends View. Inside its onDraw() method, draw your rectangle. For example:

public class Box extends View {
  private Paint paint = new Paint();
  Box(Context context) {
    super(context);
  }

  @Override
  protected void onDraw(Canvas canvas) { // Override the onDraw() Method
    super.onDraw(canvas);

    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.GREEN);
    paint.setStrokeWidth(10);

    //center
    int x0 = canvas.getWidth()/2;
    int y0 = canvas.getHeight()/2;
    int dx = canvas.getHeight()/3;
    int dy = canvas.getHeight()/3;
    //draw guide box
    canvas.drawRect(x0-dx, y0-dy, x0+dx, y0+dy, paint);
  }
}

Then, in your camera preview Activity, have an instance to your Box class:

Box box = new Box(this);

Finally:

addContentView(box, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

A green rectangle will be drawn onto your camera preview.