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="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="bottom"
 >
<Button
android:id="@+id/takepicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" * Take Picture "
android:layout_gravity="right"
android:layout_margin="10px"
/>
</LinearLayout>


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

import java.io.IOException;

import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.graphics.PixelFormat;
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. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  
     getWindow().setFormat(PixelFormat.UNKNOWN);
     surfaceView = (SurfaceView)findViewById(R.id.camerapreview);
     surfaceHolder = surfaceView.getHolder();
     surfaceHolder.addCallback(this);
     surfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
  
     controlInflater = LayoutInflater.from(getBaseContext());
     View viewControl = controlInflater.inflate(R.layout.control, null);
     LayoutParams layoutParamsControl
      = new LayoutParams(LayoutParams.FILL_PARENT,
      LayoutParams.FILL_PARENT);
     this.addContentView(viewControl, layoutParamsControl);
  
 }



@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
 int height) {
// TODO Auto-generated method stub
if(previewing){
 camera.stopPreview();
 previewing = false;
}

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

@Override
public void surfaceCreated(SurfaceHolder holder) {
// TODO Auto-generated method stub
camera = Camera.open();
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
// TODO Auto-generated method stub
camera.stopPreview();
camera.release();
camera = null;
previewing = false;
}
}


Download the files.

next:
- Implement takePicture function of Android Camera

34 comments:

  1. Can you provide the code for using the button too?

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

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. 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.

    http://www.medicinenet.com/symptom-checker-for-women/symptomchecker.htm

    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!

    ReplyDelete
  5. 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.

    ReplyDelete
  6. 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.
    Thanks.

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

    ReplyDelete
  8. Anurak Kopadung,

    Sorry! I have no idea.

    ReplyDelete
  9. ajju,

    viewControl is the control layer.

    ReplyDelete
  10. ajju,

    control.xml is the control layout.

    ReplyDelete
  11. What is R.layout.control i here

    ReplyDelete
  12. 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.

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

    ReplyDelete
  14. hello Numair Qadir,

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

    ReplyDelete
  15. 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.

    ReplyDelete
  16. 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.

    ReplyDelete
  17. 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.

    ReplyDelete
  18. how can i add overlay images to merge with camera

    ReplyDelete
  19. 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.

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

    ReplyDelete
  21. 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.

    ReplyDelete
  22. 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?

    ReplyDelete
  23. camera save image with overlay picture

    ReplyDelete
  24. 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??

    ReplyDelete
  25. Hi,

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

    Thanks

    ReplyDelete
  26. 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?

    Regards,
    Carlos.

    ReplyDelete
  27. 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.

    ReplyDelete
  28. 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

    ReplyDelete
  29. Thanks a lot.
    Been very helpful to me.

    ReplyDelete