Wednesday, December 29, 2010

Add a overlay on Camera Preview SurfaceView

Modify from last exercise "Camera Preview, version II", a overlay will be add on the Camera Preview SurfaceView. Controls; such as "Take Picture" button is added on the overlay.

Add a overlay on Camera Preview SurfaceView

Keep using the AndroidManifest.xml and main.xml in last exercise "Camera Preview, version II" without change.

Add a layout xml file, control.xml, under /res/layout folder. It define the layout of the control layer.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
android:text=" * Take Picture "

Modify to inflate a layer using control.xml
package com.exercise.AndroidCamera;


import android.hardware.Camera;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.ViewGroup.LayoutParams;

public class AndroidCamera extends Activity implements SurfaceHolder.Callback{

Camera camera;
SurfaceView surfaceView;
SurfaceHolder surfaceHolder;
boolean previewing = false;
LayoutInflater controlInflater = null;

 /** Called when the activity is first created. */
 public void onCreate(Bundle savedInstanceState) {
     surfaceView = (SurfaceView)findViewById(;
     surfaceHolder = surfaceView.getHolder();
     controlInflater = LayoutInflater.from(getBaseContext());
     View viewControl = controlInflater.inflate(R.layout.control, null);
     LayoutParams layoutParamsControl
      = new LayoutParams(LayoutParams.FILL_PARENT,
     this.addContentView(viewControl, layoutParamsControl);

public void surfaceChanged(SurfaceHolder holder, int format, int width,
 int height) {
// TODO Auto-generated method stub
 previewing = false;

if (camera != null){
 try {
  previewing = true;
 } catch (IOException e) {
  // TODO Auto-generated catch block

public void surfaceCreated(SurfaceHolder holder) {
// TODO Auto-generated method stub
camera =;

public void surfaceDestroyed(SurfaceHolder holder) {
// TODO Auto-generated method stub
camera = null;
previewing = false;

Download the files.

- Implement takePicture function of Android Camera


MvP said...

Can you provide the code for using the button too?

Erik said...

hello MvP,

please refer:
- Implement takePicture function of Android Camera
- Save the camera image using MediaStore
- Start Camera auto-focusing, autoFocus()

MvP said...

Can u pls tell me how to use the CamcorderProfile?? Thanks in advance

Erik said...

hello MvP,

Please refer CamcorderProfile: predefined camcorder profile settings for camcorder applications

stephy yan said...
This comment has been removed by the author.
stephy yan said...

My Android Application need to build a Symptom Checker like this website. I need to display different text/image when different part of human body(image) being touch.

I have no idea where I need to start. Is that using OnTouchListener/OnTouchEvent? or is there any recommended tutorial for me to learn from it first?

Thank you for any responses!

Erik said...

hello stephy yan,

If you want to detect the touch position on a image only, you can implement your custom ImageView, and override the onTouchEvent(). Please read here: Detect touched position on a ImageView.

madeeha said...

how to remove overlay item?

Erik said...

hello madeeha,

do you means how to add/remove views?

Unknown said...

I want to record video camera while playing a video and I think a surface view cannot overlay on the other surface view, but I have no idea to implement that.

Please help me.

ajju said...

in this code which is control layout...???

Erik said...

Anurak Kopadung,

Sorry! I have no idea.

Erik said...


viewControl is the control layer.

Erik said...


control.xml is the control layout.

Nuwan said...

What is R.layout.control i here

Erik said...

hello Nuwan,

refer to the text: "Add a layout xml file, control.xml, under /res/layout folder. It define the layout of the control layer."

It's is a layout to have a button.

Numair Qadir said...

Hi, your post was very fruitful. Can you please help me if i want to add another button, ??

Erik said...

hello Numair Qadir,

You can modify control.xml to add another button on the layer.

Numair Qadir said...

Thanks for your prompt response, i've added the buttons in control.xml and they are showing on the screen, but they neither giving any errors nor they are working.

Erik said...

hello Numair Qadir,

Yes, up to this step, we only add the button on screen without action. Refer to next post Implement takePicture function of Android Camera how to add OnClickListener for the buttons.

Imran.Android said...

great Code working well i have a condition in my project i want save overlay image with camera image i tried but my code is not working any idea or Link.

Unknown said...

how can i add overlay images to merge with camera

Unknown said...

is it possible to just view the image right after it was taken?? without saving it yet. then the user will just have an option to either save or discard it?? Thanks. Big help.

Srikanth said...

Thanks for this post... it was really helpful to me.

Erik said...

Hello Ali,

What's your device and Android OS version? Somebody reported that it doesn't work on new Android OS version! May be I have to re-try it later.

Unknown said...

Making a barCode Reader app using Zbar sdk for android i want to add rectangle frame so as to focus on barcode in my camera preview , how shud i do it?

sarath said...

camera save image with overlay picture

Unknown said...

Thanks Buddy...

Dihaz said...

I want to overlay a frame in camera view while taking a picture and the image should be saved along with the frame...Is that possible??

Unknown said...


Can you please post something on how to keep the take picture button correctly on rotation?


Carlos said...

Hello, please,let me do a question, Could you tell me How can I add a frame to the new photo that I have took it?


Erik said...

hello Carlos,

Do you means add a frame on image? please read Create frame on Bitmap image.

But I haven't tested if it can work on large bitmap or not.

Guru said...

Hi Folks

Pleas guide to find solution for the following requirement

1. Is it possible draw a circle when camera initiated ?

2. Upon clicking a button then camera should capture only the object focused inside the circle?

Thanks you

Mohamed Elfeki said...

Thanks a lot.
Been very helpful to me.