how to make surfaceview transparent

Question

Hello all i want to make my DrawingSurface view transparent. i tried many thing but it's not working.

Here is my xml code to make my surface view transparent

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

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/icon" >
        </ImageView>

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#00000000" >

            <codewalla.android.drawings.DrawingSurface
                android:id="@+id/drawingSurface"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
            </codewalla.android.drawings.DrawingSurface>
        </LinearLayout>
    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/colorRedBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:onClick="onClick"
            android:text="R" />

        <Button
            android:id="@+id/colorBlueBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:onClick="onClick"
            android:text="G" />

        <Button
            android:id="@+id/colorGreenBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:onClick="onClick"
            android:text="B" />

        <Button
            android:id="@+id/undoBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:onClick="onClick"
            android:text="U" />

        <Button
            android:id="@+id/redoBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:onClick="onClick"
            android:text="R" />
    </LinearLayout>

</RelativeLayout>

Teillo

Answer 1

Try this in the constructor:

SurfaceView sfvTrack = (SurfaceView)findViewById(R.id.sfvTrack);
sfvTrack.setZOrderOnTop(true);    // necessary
SurfaceHolder sfhTrackHolder = sfvTrack.getHolder();
sfhTrackHolder.setFormat(PixelFormat.TRANSPARENT);

Valma

Wow, I was hammering on this, already having added the transparent pixel format as well as a transparent background in the XML. It turns out that the 'setZOrderOnTop(true)' call is CRITICAL. Thanks for posting this, I never would have tried that otherwise. – Celiotomy

This works great except the setZOrderOnTop() means that you can't place any graphics on top of this SurfaceView, which is unfortunate. =\ – Frendel

But it covers all other views on the layout, meant if i draw on surface view then any image/buttons will be painted. how can i get out of this issue? – Athodyd

Tried in my side. Works great on 4.0 but 2.3. – Grisham

Essential for being able to view a layout background texture behind the SurfaceView. By default pixels are 0xff000000 and simply changing the alpha doesn't work. – Arrogate

Can you explain something, where i found R.id.sfvTrack, I am stuck with this problem. Is there any full example link of SurfaceView Transparent – Ironsides

This technique worked for me. I was able to play a video on a SurfaceView, and have text appear over the video. – Hebdomad

The "multi-surface test" in Grafika demonstrates three transparent overlapping SurfaceViews mixed with the View UI layer. github.com/google/grafika/blob/master/src/com/android/grafika/… . FWIW, "try this in the constructor" should probably read "try this in onCreate()", and changing the pixel format from RGB565 to RGB888 is pretty necessary too. – Gremlin

Tried the code on Android 5.1: it works, but if you omit sfvTrack.setZOrderOnTop(true); , the background will be black. – Mellisamellisent

Answer 2

sfvTrack.setZOrderOnTop(true); 

will place the surfaceView on top of the window, meaning you cannot add items on top of the surfaceView.

If you want to add views on top of the surface view; you should consider using:

setZOrderMediaOverlay(true);

instead. This places this surfaceView on top of other surfaceViews, but still behind the window, allowing you to add other visible views on top of the surface view.

Hokeypokey

setZOrderMediaOverlay + PixelFormat.TRANSPARENT is not working. – Skep

Answer 3

Is your DrawingSurface and extension of SurfaceView?

There is no way to get a SurfaceView to do what you are wanting it to do. The mechanics of the surface view are such that it can not have anything visible behind it. (see the answer here http://groups.google.com/group/android-developers/browse_thread/thread/8d88ef9bb22da574)

I tested your hierarchy with a custom view extending SurfaceView and I see your problem. If I switch to a custom view that simply extends View, I can get transparency.

Infelicity

thanks slund, you are right but it need to put camera preview behind and it it my drawing surface, so i want to draw upon camera preview – Teillo

Answer 4

TexttureView will be better for your needs than SurfaceView, i believe.

Gravelly

Yes, provided we don't need to target earlier than 14! – Wholehearted