android2dsurfaceviewsurfaceholder

Change size of Android custom SurfaceView


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?


Solution

  • 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
    }