Home » Android » Android – show grid lines on camera

Android – show grid lines on camera

Posted by: admin June 15, 2020 Leave a comment

Questions:

I am newbie in android application development. I want to create an application that get stream from camera and show on SurfaceView or on FrameLayout.

I need an option shows above on streaming “Show Grid Lines”, when user click on it grid lines will show on camera stream.

Can anybody help me that how can I show grid lines on camera streaming???

Any Help will be appreciable…

Thank you.
Mohsin

How to&Answers:

If you want to draw the lines dynamically as per your screen size then you should use the following code in your camera preview class.

    @Override  
    protected void onDraw(Canvas canvas)  
    { 
        if(grid){
        //  Find Screen size first  
        DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();  
        int screenWidth = metrics.widthPixels;  
        int screenHeight = (int) (metrics.heightPixels*0.9);  

        //  Set paint options  
        paint.setAntiAlias(true);  
        paint.setStrokeWidth(3);  
        paint.setStyle(Paint.Style.STROKE);  
        paint.setColor(Color.argb(255, 255, 255, 255));  

        canvas.drawLine((screenWidth/3)*2,0,(screenWidth/3)*2,screenHeight,paint);
        canvas.drawLine((screenWidth/3),0,(screenWidth/3),screenHeight,paint);
        canvas.drawLine(0,(screenHeight/3)*2,screenWidth,(screenHeight/3)*2,paint);
        canvas.drawLine(0,(screenHeight/3),screenWidth,(screenHeight/3),paint);
        }
    } 

You also need to add the following line in the constructor of your camera preview class:

this.setWillNotDraw(false);

Answer:

If you want an overlay over camera preview, you’d have to write your own camera. It’s quite difficult topic to cover in one answer, but here is a guide that should get you started:

http://developer.android.com/guide/topics/media/camera.html#custom-camera

Once you have working camera, just edit XML layout of your camera activity. Use RelativeLayout, it will allow you to place other Views (buttons, images) over your preview surface.

Here is an example of XML layout compatible with guide mentioned above. Preview surface is created programatically and put into FrameLayout (more in guide linked above). ImageView will be drawn over preview surface.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

  <FrameLayout
    android:id="@+id/camera_preview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

  <ImageView
    android:id="@+id/grid"
    android:src="@drawable/your_grid_drawable"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

</RelativeLayout>

You’ll also have to place there a capture button and a grid switch button, but you should get the idea how to do it from the example above. Just add more elements into RelativeView and position them as you would in ordinary layout.