Camera preview with a transparent image above

Question

I would like to see an image on top of Camera SurfaceView\preview. How do I do that? Any examples?

Answer 1

A great example can be found in ZXing library, Barcode Scanner application.

What they do is they use FrameLayout for SurfaceView and their custom ViewfinderView so that both SurfaceView and ViewfinderView are covering full screen:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">

  <SurfaceView android:id="@+id/preview_view"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_centerInParent="true"/>

  <com.google.zxing.client.android.ViewfinderView
      android:id="@+id/viewfinder_view"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@color/transparent"/>

</FrameLayout>

Note the fill_parent values in layout_height and layout_width for both views.

And then they draw custom things in ViewfinderView.onDraw() method, just on top of what is being displayed by camera preview.

If you don't want to draw anything, but just use predefined image, then use ImageView instead of ViewfinderView. You might consider calling setAlpha method to make your image transparent (if drawable wasn't already transparent by itself).

---

Here is a screenshot from Barcode Scanner: