Android transparent canvas (surfaceview)

Question

I've got a panel which is placed on top of another view via a relativelayout.

I would like to give this panel a transparent background, but didn't find the correct way to do this after searching for some hours. When I set the alpha back to 0 I end up with a black background.

Hopefully someone here can help me with this.

Thanks a lot!

The panel is drawn via this code:

    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Paint;
    import android.util.AttributeSet;
    import android.view.SurfaceHolder;
    import android.view.SurfaceView;

    public class Panel extends SurfaceView implements SurfaceHolder.Callback {

    private ViewThread mThread;

    Paint paint = new Paint();

    public Panel(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        getHolder().addCallback(this);
        mThread = new ViewThread(this);
    }

    public void doDraw(Canvas canvas) {
        canvas.drawARGB(50, 120, 120, 120);

        paint.setARGB(255, 255, 0, 0);
        paint.setStrokeWidth(2);

        int CanvasHeight = canvas.getHeight();
        int CanvasWidth  = canvas.getWidth();

        canvas.drawLine(LeftStartX, LeftStartY, StopX, StopY, paint);
    }

    public void updateDrawing(float LB, float RB, float BD, float AH, float AD ){
        Left = LB;
        Right = RB;
        Distance = BD;
        AHeight = AH;
        ADistance = AD;
    }

    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}


    public void surfaceCreated(SurfaceHolder holder) {
        if (!mThread.isAlive()) {
            mThread = new ViewThread(this);
            mThread.setRunning(true);
            mThread.start();
        }
    }


    public void surfaceDestroyed(SurfaceHolder holder) {
        if (mThread.isAlive()) {
            mThread.setRunning(false);
        }
    }
}

score 27 · Answer 1 · edited Apr 08 '13 at 08:09

27

In the constructor:

setZOrderOnTop(true);

After holder.addCallback(this):

holder.setFormat(PixelFormat.TRANSPARENT);

At the beginning of drawing:

canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

edited Apr 08 '13 at 08:09

Bastien Jansen

8,756
2
35
53

answered Apr 08 '13 at 07:50

Bilal Sammour

421
4
9

Oh, this is the answer! if the first calls make the background transparent, the last line also allows you to draw bitmaps with alpha level – Giudark Nov 19 '14 at 14:13
Thanks, it does the trick, a little too well though: `setZOrderOnTop` makes it appear at the very top of the window. So now the SurfaceView appears above its background (which is perfect for transparency), but then when I drag my Navigation Drawer the SurfaceView is also on top of it (instead of below), which looks awful. Any idea? – David Ferrand May 18 '15 at 19:06
@Dadou just having the same problem, did you find any solution? – Fabian Köbel Aug 18 '15 at 14:59
I spent days trying to figure this out. Thank you very much!! – Joben R. Ilagan Aug 06 '16 at 06:19

score 4 · Answer 2 · edited May 23 '17 at 10:29

4

I copied the solution from the same question: how to make surfaceview transparent and got it to work with a setup similar to yours.

The critical piece for me was the 'setZOrderOnTop(true)' setting, which I foolishly ignored on the first pass. I put that in the constructor, and set my pixel format to RGBA_8888 inside surfaceCreated.

At this point, the background from the top-level layout was visible.

edited May 23 '17 at 10:29

Community

1
1

answered Dec 02 '11 at 00:46

ProjectJourneyman

3,566
1
27
37

setZOrderOnTop(true) is the missing piece of the puzzle here, and it's completely non-intuitive. – Nik Reiman Mar 01 '12 at 15:41

score 3 · Answer 3 · answered Sep 03 '11 at 18:05

3

Try this:

getHolder().setFormat(PixelFormat.TRANSLUCENT);

answered Sep 03 '11 at 18:05

Fernando Gallego

4,064
31
50

Thank you for your answer, but unfortunately this didn't solve the problem. I've placed this line above and below `getHolder().addCallback(this);` but the background stayed black. – patrick Sep 03 '11 at 18:31
uhmmm.. what about removing the background with `setBackgroundResource(0)` or in xml `android:background="@null"` – Fernando Gallego Sep 05 '11 at 10:14
Ferdy, thanks for your new suggestion, but unfortunately this didn't solve the problem either. This showed a black background as well. – patrick Sep 05 '11 at 18:02

score 2 · Accepted Answer · edited May 23 '17 at 12:10

After searching with keyword surfaceview instead of canvas iI found out that it isn't possible. For more information see: how to make surfaceview transparent

Because the background of the canvas is static I've gave it the exact same background. Now it looks like it is transparent :)

    Bitmap bg = BitmapFactory.decodeResource(getResources(), R.drawable.background_panel_800_480);
    canvas.drawBitmap(bg, 0, 0, null);

Android transparent canvas (surfaceview)

4 Answers4

Linked