How to Make a Custom Overlay View Transparent on top of a SurfaceView?

Question

OK I've gone through many similar questions here on SO and around the web, to no avail. I'm just trying to overlay a transparent view on top of a SurfaceView.. and eventually draw a rectangle on it, such that it appears to overlay the camera preview.

I cannot get the custom view to be transparent, it blocks-out the underlying camera preview. Any suggestions?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <FrameLayout 
        android:layout_alignParentTop="true"
        android:layout_width="fill_parent"
        android:layout_height="400dip">
        <SurfaceView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:id="@+id/drawSurface"  />
        <com.bobby.facecapture.FaceOverlayView
            android:id="@+id/drawOverlay"
            android:background="@android:color/transparent" 
            android:layout_width="200dip"     
            android:layout_height="200dip"    
        />
    </FrameLayout>
</RelativeLayout>

The 200x200 is just temporary, to prove that it is indeed overlaying the other view.

The FaceOverlayView is just a custom view - deriving directly from View, without overriding anything (for now).

I get a black rectangle on top of the camera preview

Answer 1

Well, this resource file is the Barcode Scanner capture layout, which has a "viewfinder" layered over top of a camera preview. They use their own @color/transparent resource, defined as <color name="transparent">#00000000</color> . Perhaps poke around with their code and try to figure out where you and they differ.

Answer 2

I have been doing exactly the same, have a customized view overlay on Camera preview. Initially the view was opaque so the camera preview got blocked. The problem was I was trying to draw an image to the canvas but specified the image as RGB_565, change it to ARGB_8888 works fine. You must have the alpha channel, and make sure the background of the custom view is set to transparent.

Answer 3

I set the alpha channel to 0. It works like a charm.

I do it after I add the custom view runtime.

(ImageView) myCustomView.setAlpha(0)

Answer 4

Have you tried setting both/either the src or the background to @null?

Also, if this avenue doesn't work out you could consider using a Path to draw onto the surface, which would allow you to dynamically change the size/location of the rectangle at runtime.

That would, however, require writing some code for a SurfaceView and handling the onDraw, which might be overkill for what you're doing. Essentially it would mean making your custom class here an extension of SurfaceView, rather than something layered on top of one.