Overlay Image On Camerapreview

INTRODUCTION I have a custom camera app, where I show camera preview over a custom surfaceView. What I need to implement is, create an overlay image from an image resource, that wi

Solution 1:

Do something like this Create camera preview class by extends SurfaceView

publicclassCameraPreviewextendsSurfaceViewimplementsSurfaceHolder.Callback {
    private SurfaceHolder mHolder;
    private Camera mCamera;
    privateStringTAG="CameraPreview";

    publicCameraPreview(Context context, Camera camera) {
        super(context);
        mCamera = camera;

        // Install a SurfaceHolder.Callback so we get notified when the// underlying surface is created and destroyed.
        mHolder = getHolder();
        mHolder.addCallback(this);
        // deprecated setting, but required on Android versions prior to 3.0
        mHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
    }

    @OverridepublicvoidsurfaceCreated(SurfaceHolder holder) {
        // The Surface has been created, now tell the camera where to draw the// preview.try {
            mCamera.setPreviewDisplay(holder);
            mCamera.startPreview();
        } catch (IOException e) {
            Log.d(TAG, "Error setting camera preview: " + e.getMessage());
        }
    }

    @OverridepublicvoidsurfaceDestroyed(SurfaceHolder holder) {
        try {
            mCamera.stopPreview();
        } catch (Exception e) {
            // ignore: tried to stop a non-existent preview
        }
        mCamera.release();
    }

    @OverridepublicvoidsurfaceChanged(SurfaceHolder holder, int format, int w, int h) {
        // If your preview can change or rotate, take care of those events here.// Make sure to stop the preview before resizing or reformatting it.if (mHolder.getSurface() == null) {
            // preview surface does not existreturn;
        }

        // stop preview before making changestry {
            mCamera.stopPreview();
        } catch (Exception e) {
            // ignore: tried to stop a non-existent preview
        }

        // set preview size and make any resize, rotate or// reformatting changes here// start preview with new settings
        StartPreview();
    }

    publicvoidStartPreview() {
        try {
            mCamera.setPreviewDisplay(mHolder);
            mCamera.startPreview();
        } catch (Exception e) {
            Log.d(TAG, "Error starting camera preview: " + e.getMessage());
        }
    }
}

Then in your activity Declare Preview Object and initialize Camera Object as well

private CameraPreview preview;

After that

// Create our Preview view and set it as the content of ur activity.
    preview = newCameraPreview(this, camera);

    // Create Frame layoutFrameLayoutpreviewLayout=newFrameLayout(this);

    // Create camera layout params
    LinearLayout.LayoutParamspreviewlayoutParams=newLinearLayout.LayoutParams(
    LinearLayout.LayoutParams.WRAP_CONTENT,    LinearLayout.LayoutParams.MATCH_PARENT, Gravity.LEFT);

// Add preview to previewLayout
previewLayout.addView(preview, 0);

BitmapoverlayBitmap= getBitmap();
if (overlayBitmap != null) {
Matrixmatrix=newMatrix();
matrix.postRotate(180);

BitmaprotatedBitmap= Bitmap.createBitmap(overlayBitmap, 0, 0, overlayBitmap.getWidth(),
overlayBitmap.getHeight(), matrix, true);

ImageViewoImageView=newImageView(this);
oImageView.setImageBitmap(rotatedBitmap);
previewLayout.addView(oImageView, 1);
}

// Add previewLayout to main layout
linearLayout.addView(previewLayout, previewlayoutParams);

That its.

Solution 2:

I did the same thing, but with a TextView over a camera preview. The trick was dettaching it from the XML Layout and attaching it over the Camera´s parent.

The answer is not intuitive at all, but I found how to do it. Unlike Linear Layouts, order of declaration does NOT define the Z order in Relative Layouts. I was able of overlaying a textview over the Camera Preview by declaring both views in XML and, and overlaying them programatically on my Activity's onCreate Method.

Suppose you have an XML with a TextView with a nice transparent backgroud that you want to overlay over the Camera Preview frame layout, because why not?, it looks cool!:

<RelativeLayout><TextViewandroid:id="@+id/txtnombotiga"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Ola ke ase"android:textColor="#000000"android:textSize="16sp"android:background="#55ffffff" 
       /><FrameLayoutandroid:id="@+id/cameraPreview"android:layout_width="match_parent"android:layout_height="240dp"></FrameLayout></RelativeLayout>

If left like that, the camera will cover your text, no matter what :( To solve it, let´s go programatical, and: 1) detach the TextView from its parent Layout 2) attach it to the camera´s frame layout after attaching the camera first.

Heres the code

OnCreate(){ ...blaa blaaa...

//Create camera instance and reference to our frame Layout
mPreview = newCameraPreview(this, mCamera, previewCb, autoFocusCB);        
FrameLayoutpreview= (FrameLayout) findViewById(R.id.cameraPreview);
//Add camera to the Frame Layout
preview.addView(mPreview);
//Get reference to the TextView you want to overlay and type something funny
TextView txt=(TextView)findViewById(R.id.txtnombotiga);     
txt.setText("ola keee aseee!");
//1) Step 1, here comes the magic! dettach the textView from its original Layout
((ViewGroup)txt.getParent()).removeView(txt);
//1) Step 2, voila! attach it to the View, order matters here so it will appear on //top of the camera!
preview.addView(txt);

This is the general way to do it, If you need more details let me know. I need to meet deadlines at work, so I use the first solution that comes up to my mind, sometimes not the most elegant or efficient, if you know a better way of doing it, please share it with us!