adding virtual-joystick relative layout to a surfaceview in Android

Question

The problem: I have my main class which extends surfaceview that contains the gameloop and I want it to use the virtual joystick found here (https://github.com/controlwear/virtual-joystick-demo) but I have been unsuccessful in getting the joysticks to appear alongside the game. I either do

setLayout(R.layout.layout) //OR
setLayout(game)

I am very new to Android Programming and I've looked into the manuals available to me but I am having trouble finding a solution to merge the two layouts. Do I have to do two seperate layout views? And how would I do that?

What I've tried doing in the Activity class, right now giving me an error (Cannot add a null child view to a ViewGroup)

public class GalaxyMonkeysActivity extends Activity {

Game game;

@Override
protected void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);

    // get the screen resolution
    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);

    game = new Game(this, size);

    RelativeLayout layout = new RelativeLayout(getApplicationContext());
    View right = findViewById(R.id.joystickView_right);
    View left = findViewById(R.id.joystickView_left);
    layout.addView(right);
    layout.addView(left);
    layout.addView(game);

    setContentView(R.layout.layout);

and in my game class which extends surfaceview

 if (state == STATE.GAME) {

                JoystickView joystickLeft = (JoystickView) findViewById(R.id.joystickView_left);
                joystickLeft.setOnMoveListener(new JoystickView.OnMoveListener() {
                    @Override
                    public void onMove(int angle, int strength) {
                        for (int i = 0; i < handler.object.size(); i++) {
                            int mx = (int) Math.cos(angle);
                            int my = (int) Math.sin(angle);
                            GameObject tempObject = handler.object.get(i);

                            if (tempObject.getId() == ID.Player) {
                                handler.addObject(new Bullet((int) tempObject.x + 16,
                                        (int) tempObject.y + 24, ID.Bullet, handler, mx, my, screenX, screenY, getContext()));
                            }
                        }
                    }
                });

                JoystickView joystickRight = (JoystickView) findViewById(R.id.joystickView_right);
                joystickRight.setOnMoveListener(new JoystickView.OnMoveListener() {
                    @Override
                    public void onMove(int angle, int strength) {
                        for (int i = 0; i < handler.object.size(); i++) {
                            GameObject tempObject = handler.object.get(i);

                            if (tempObject.getId() == ID.Player) {
                                if (angle > 45 && angle < 135)
                                    handler.setUp(true);
                                if (angle > 135 && angle < 225)
                                    handler.setLeft(true);
                                if (angle > 225 && angle < 305)
                                    handler.setDown(true);
                                if (angle > 305 && angle < 45)
                                    handler.setRight(true);

                            }

                        }
                    }
                });

and in my layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context="com.theGalaxyMonkey.GalaxyMonkeysActivity"
android:background="@drawable/back"
android:id="@+id/main_layout">

<io.github.controlwear.virtual.joystick.android.JoystickView xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/joystickView_left"
    android:layout_width="166dp"
    android:layout_height="148dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/joystick_background"
    custom:JV_buttonImage="@drawable/pink_ball"
    custom:JV_fixedCenter="true" />

<io.github.controlwear.virtual.joystick.android.JoystickView xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/joystickView_right"
    android:layout_width="154dp"
    android:layout_height="205dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    custom:JV_backgroundColor="#009688"
    custom:JV_borderColor="#00796B"
    custom:JV_borderWidth="8dp"
    custom:JV_buttonColor="#FF6E40" />

I've also tried:

    setContentView(R.layout.layout);
    addContentView(game, new RelativeLayout.LayoutParams(size.x, size.y));

which this plays the game, however, it isn't effective as the joysticks are underneath a layer of the main menu background.

Answer 1

one simple solution would be to add your game view to the layout.xml directly:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://sche...>

<io.github.controlwear.virtual.joystick.android.JoystickView... /> <!-- left -->
<io.github.controlwear.virtual.joystick.android.JoystickView.../> <!-- right --> 
<your.game.package.Game .../> <!-- your Game view extends SurfaceView -->

(please excuse that i've shortened the xml)

after you've done that your activity should be done by simply calling setContentView(R.layout.layout); - you can skip the part, where you manually/programmatically add views to the layout.

Hints on your errors: if you try to get a view with findViewById before you have created the view (by calling setContentView(R.layout.layout);) the method will return null (see View Api) and nullcannot be added to a Layout...