Eric Van Bezooijen
Eric Van Bezooijen

Reputation: 619

SurfaceView transparency not working properly

I've read every webpage available on google, read the 10+ stackoverflow posts on the subject, but I still cannot get this working properly. I'm 99% there. There must be something very simple I'm missing but I've spent 4 hours on this so far with no luck.

I'm working on the main menu for a game I'm writing. I want to draw some animation in a center transparent SurfaceView, but I always get a black screen instead of seeing the background. Since the SurfaceView is on top of a LinearLayout, I've played around with every combination of background color and alpha setting -- nothing works.

Like the 10+ topics on stackoverflow mention, I added this:

    mAnimView = (SurfaceView) findViewById (R.id.animationSurfaceView);
    mAnimView.setZOrderOnTop(true);    // necessary
    mAnimView.getHolder ().setFormat(PixelFormat.TRANSPARENT);
    SurfaceHolder sfhTrackHolder = mAnimView.getHolder ();
    sfhTrackHolder.addCallback (this);

In the callbacks I do this:

public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    holder.setFormat(PixelFormat.TRANSPARENT);
}

public void surfaceCreated (SurfaceHolder holder) {
    holder.setFormat(PixelFormat.TRANSPARENT);
}

public void surfaceDestroyed (SurfaceHolder holder) {

}

In my paint routine I do this:

Paint p = new Paint ();
p.setColor (0);
p.setStyle(Paint.Style.FILL);
c.drawColor(0,android.graphics.PorterDuff.Mode.CLEAR);

(I know it's redundant, I was getting desperate)

Well, what's weird is that my SurfaceView IS transparent, but only under certain circumstances.

This is what my screen looks like if I put set the LinearView that contains my SurfaceView to have a background texture under it (I draw the little man on top of the SurfaceView canvas after it gets created):

Texture background

This is what my screen looks like if I set the background of the LinearView under my Surface view to have a red color:

Color background

NEW data point! If I set the background of the root LinearLayout to a single color, then it also works. I'm starting to think it has something to do with that background?

red root background

This is what my screen looks like if I set the background of the LinearView under my SurfaceView to transparent. Why am I seeing the background of the root LinearView in EVERY part of my window except the SurfaceView? Utterly confused by this.

enter image description here

This is my XML file:

<LinearLayout
    android:background="@drawable/main_menu_background"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="top"
    android:id="@+id/mainSectionMenu"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="LUNA PUMA"
        android:id="@+id/titleText"
        android:layout_gravity="center"
        android:textColor="#ff6495ed"
        android:autoText="false"
        android:textSize="50dp"
        android:layout_weight=".3"
        android:gravity="center"
        android:background="@android:color/transparent"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight=".5"
        android:background="@android:color/transparent"
        >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight=".25"
            >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Easy"
                android:id="@+id/easyButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:background="@android:color/transparent"
                android:textColor="#ff6495ed"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Medium"
                android:id="@+id/mediumButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:textColor="#ff6495ed"
                android:background="@android:color/transparent"/>
        </LinearLayout>

        <SurfaceView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:id="@+id/animationSurfaceView"
            android:layout_weight=".5"
            />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight=".25">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Hard"
                android:id="@+id/hardButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:textColor="#ff6495ed"
                android:background="@android:color/transparent"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="More ..."
                android:id="@+id/moreButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:background="@android:color/transparent"
                android:textColor="#ff6495ed"
                android:alpha="1"
                android:clickable="false"/>
        </LinearLayout>
    </LinearLayout>



    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight=".2">
    </FrameLayout>

</LinearLayout>

Upvotes: 0

Views: 2769

Answers (2)

Eric Van Bezooijen
Eric Van Bezooijen

Reputation: 619

It turns out it was something VERY VERY simple!

I did everything correctly. It was implemented properly.

I had forgotten that for earlier testing for spacing and sizing of the astronaut I had cut out a black square from my background texture which just happened to be the exact same size of the surface view!!!!

I was looking at the correct texture all along.

Sigh!

Upvotes: 2

Bajji
Bajji

Reputation: 2393

I don't know a direct way of doing it in xml, but I believe apart from applying transparency to your containing LinearLayout, you need to apply transparency to your SurfaceView as well. Do this in your activity :

SurfaceView surface = (SurfaceView)findViewById(R.id.your_surface_view);
surface.setZOrderOnTop(true);
SurfaceHolder surfaceHolder = surface.getHolder();
surfaceHolder.setFormat(PixelFormat.TRANSPARENT);

Upvotes: 1

Related Questions