Transparent SurfaceView

Question

in my project I have a joystick. Here's what it look like

My problem is that black color, how to make it transparent.

Here's my code

public class JoyStickView extends SurfaceView implements SurfaceHolder.Callback, View.OnTouchListener{
private float centerX;
private float centerY;
private float baseRadius;
private float hatRadius;
private JoyStickListener joyStickCallback;

    public JoyStickView(Context context){
       super(context);

       getHolder().setFormat(PixelFormat.TRANSPARENT);
       getHolder().addCallback(this);

       setZOrderOnTop(true);

       setOnTouchListener(this);

       if(context instanceof JoyStickListener){
          joyStickCallback = (JoyStickListener)context;
       }
    }

...
}

My .xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.akoni.control.Controller">

<com.example.akoni.control.JoyStickView
    android:id="@+id/joyStickLeft"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="50dp"
    android:layout_marginBottom="10dp"/>

<com.example.akoni.control.JoyStickView
    android:id="@+id/joyStickRight"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignBottom="@+id/joyStickLeft"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="50dp" />

</RelativeLayout>

EDITED

Full code for Joystick.

public class JoyStickView extends SurfaceView implements SurfaceHolder.Callback, View.OnTouchListener{
private float centerX;
private float centerY;
private float baseRadius;
private float hatRadius;
private JoyStickListener joyStickCallback;

public JoyStickView(Context context){
    super(context);

    getHolder().setFormat(PixelFormat.TRANSPARENT);
    getHolder().addCallback(this);
    setZOrderOnTop(true);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

public JoyStickView(Context context, AttributeSet attributeSet, int style){
    super(context, attributeSet, style);
    getHolder().addCallback(this);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

public JoyStickView(Context context, AttributeSet attributeSet){
    super(context, attributeSet);
    getHolder().addCallback(this);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

@Override
public void surfaceCreated(SurfaceHolder holder){
    setupDimensions();
    drawJoyStick(centerX, centerY);
}

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

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {

}

@Override
public boolean onTouch(View v, MotionEvent event) {
    final float displacement;
    final float constrainX;
    final float constrainY;
    final float ratio;
    if(v.equals(this)){
        displacement = (float) Math.sqrt(Math.pow(event.getX() - centerX, 2) + Math.pow(event.getY() - centerY, 2));
        if(event.getAction() != MotionEvent.ACTION_UP){
            if(displacement < baseRadius) {
                drawJoyStick(event.getX(), event.getY());
                joyStickCallback.onJoyStickMoved((event.getX() - centerX)/baseRadius, (event.getY() - centerY)/baseRadius, getId());
            }
            else {
                ratio = baseRadius / displacement;
                constrainX = centerX + (event.getX() - centerX) * ratio;
                constrainY = centerY + (event.getY() - centerY) * ratio;

                drawJoyStick(constrainX, constrainY);
                joyStickCallback.onJoyStickMoved((constrainX - centerX)/baseRadius, (constrainY - centerY)/baseRadius, getId());
            }
        }
        else if(event.getAction() == MotionEvent.ACTION_UP){
            drawJoyStick(centerX, centerY);
            joyStickCallback.onJoyStickMoved(0, 0, getId());
        }
    }

    return true;
}

public void setupDimensions(){
    centerX = getWidth() / 2;
    centerY = getHeight() / 2;
    baseRadius = Math.min(getWidth(), getHeight()) / 3;
    hatRadius = Math.min(getWidth(), getHeight()) / 6;
}

public void drawJoyStick(float newX, float newY){

    if(getHolder().getSurface().isValid()) {
        Canvas canvas = this.getHolder().lockCanvas();
        Paint color = new Paint();

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

        //base Circle
        color.setARGB(100, 50, 50, 50);
        canvas.drawCircle(centerX, centerY, baseRadius, color);

        //top Circle
        color.setARGB(255, 0, 0, 255);
        canvas.drawCircle(newX, newY, hatRadius, color);

        getHolder().unlockCanvasAndPost(canvas);
    }
}

public interface JoyStickListener{
    void onJoyStickMoved(float xPercent, float yPercent, int source);
}

}

The black color is still there. I want to see only the joystick, the circle ones. It is already functional though. Thanks for the help.

Answer 1

Does your joystick image have an alpha channel? If no, edit it with "Gimp", for instance, then add an alpha channed and erase the black area.

Answer 2

You have to change the order of three lines of code:

    setZOrderOnTop(true);
    getHolder().addCallback(this); 
    getHolder().setFormat(PixelFormat.TRANSPARENT);

and put them in all JoyStickView. It works for me