Question

I’m trying to create a 2D game engine for an Android app. I’ve followed this tutorial, which works fine for creating a full screen display, but I don’t want that. I want to make my view take the top 2/3 (or whatever) of the screen, and fill the bottom third with standard Android widgets (buttons, text entry, etc.). I cannot get this to work. The best I can get is a blank white screen. I’ve tried many permutations, including using an outer LinerLayout, then embedding the custom SurfaceView inside a nested RelativeLayout, and putting the Android widgets in a nested LinearLayout, and it doesn’t work.

For instance, this produces a white screen, when I feel like it should be 50% SurfaceView, 50% for a TextView:

activity_main.xml:

<LinearLayout 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:baselineAligned="false" >

<RelativeLayout
    android:layout_width="0dip"
    android:layout_height="0dp"
    android:layout_weight="1"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mapContainer"
    >
</RelativeLayout> 

<LinearLayout
    android:layout_width="0dip" 
    android:layout_weight="1"
    android:layout_height="0dp"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/white"
        android:text="@string/test_str" />
</LinearLayout>

</LinearLayout>

MainActivity.java:

package com.removed.for.privacy;

import com.removed.for.privacy;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout mapContainer = (RelativeLayout) findViewById(R.id.mapContainer);

        JSMapView mapView = new JSMapView(this);
        mapContainer.addView(mapView);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

Any ideas?

Answer 1

Figured it out through lots of googling and semi-related questions. Here’s an example of how I got it to fill 2/3 the height in portrait mode (100% width), and 2/3 width (100% height) in landscape.

In the custom surface view, override the onLayout method:

@Override
public void onLayout(boolean changed, int left, int top, int right, int bottom) {
    if (changed) {
        (this).layout(0, 0, viewWidth, viewHeight);
    }
}

In the class constructor, add this code:

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


    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    int rotation = display.getRotation();

    // If vertical, we fill 2/3 the height and all the width. If horizontal,
    // fill the entire height and 2/3 the width
    if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180) {
        screenWidth = display.getWidth();
        screenHeight = display.getHeight();
        viewHeight = 2 *  (screenHeight / 3);
        viewWidth = screenWidth;
    } else {
        screenWidth = display.getWidth();
        screenHeight = display.getHeight();
        viewWidth = 2 * (screenWidth / 3);
        viewHeight = screenHeight;
    }
    // Enter rest of code here
}