How to Draw an Overlay on a Surfaceview Used by Camera on Android

How to draw an overlay on a SurfaceView used by Camera on Android?

SurfaceView probably does not work like a regular View in this regard.

Instead, do the following:

  1. Put your SurfaceView inside of a
    FrameLayout or RelativeLayout in
    your layout XML file, since both of
    those allow stacking of widgets on
    the Z-axis
  2. Move your drawing logic
    into a separate custom View class
  3. Add an instance of the custom View
    class to the layout XML file as a
    child of the FrameLayout or
    RelativeLayout, but have it appear
    after the SurfaceView

This will cause your custom View class to appear to float above the SurfaceView.

Overlay images onto Camera preview SurfaceView and how to save them?

I think you are asking how to merge the two images into one.

The first thing you should do is use an AsynchHandler to save your image so you don't lock up the UI, that's not part of your issue but it will be.

As to your general question it was asked and answered here in general you will need to merge the two image parts together and handle scaling of your overlay as a whole, or the component image parts.

Draw Rectangle on SurfaceView

Ok, Thanks to fadden I found the easiest solution(at least for me).

First I created another Surface view and my XML file look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_gravity="left|top">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<SurfaceView
android:layout_alignParentTop="true"
android:id="@+id/CameraView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<SurfaceView
android:layout_alignParentTop="true"
android:id="@+id/TransparentView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</RelativeLayout>

And than I'm created another holder for the new surface, this is a part of my java code:

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video_capture);
// Create first surface with his holder(holder)
cameraView = (SurfaceView)findViewById(R.id.CameraView);
cameraView.setOnTouchListener(onTouchListner);

holder = cameraView.getHolder();
holder.addCallback(this);
holder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

// Create second surface with another holder (holderTransparent)
transparentView = (SurfaceView)findViewById(R.id.TransparentView);

holderTransparent = transparentView.getHolder();
holderTransparent.setFormat(PixelFormat.TRANSPARENT);
holderTransparent.addCallback(callBack);
holderTransparent.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
}

At last I implement a method called 'DrawFocusRect'

private void DrawFocusRect(float RectLeft, float RectTop, float RectRight, float RectBottom, int color)
{

canvas = holderTransparent.lockCanvas();
canvas.drawColor(0,Mode.CLEAR);
//border's properties
paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(color);
paint.setStrokeWidth(3);
canvas.drawRect(RectLeft, RectTop, RectRight, RectBottom, paint);


holderTransparent.unlockCanvasAndPost(canvas);
}

As you can see, I clear the canvas every time, if I don't do this, the surface will display in addition more rectangles on each others.

This is how I call to this method from a 'OnTouchListener' event:

OnTouchListener onTouchListner = new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
RectLeft = event.getX() - 100;
RectTop = event.getY() - 100 ;
RectRight = event.getX() + 100;
RectBottom = event.getY() + 100;
DrawFocusRect(RectLeft , RectTop , RectRight , RectBottom , Color.BLUE);
}
};

Hope this would be helpfull for someone else.

Android SurfaceView overlay on camera view does not show when preview is on

Ok, if anyone else gets this, solution is to call this on the surfaceView

this.setZOrderMediaOverlay(true);

Monodroid - Draw an overlay and put a button over a camera preview

You could use a FrameLayout like this:

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

<android.view.SurfaceView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.view.SurfaceView>

<RelativeLayout android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#FFFFFF" android:layout_alignParentBottom="true">

<ImageView android:scaleType="centerCrop" android:src="@drawable/some_drawable" android:layout_centerInParent="true" android:clickable="true"
android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/my_button"/>
</RelativeLayout>
</FrameLayout>

Wrapping everything in the FrameLayout is one way to simply stack views on top of the SurfaceView. Use a similar approach to add your viewfinder.



Related Topics



Leave a reply



Submit