As I cannot Adding an xml layout below a dynamic sized canvas

Question

I am looking to implement a xml layout below my canvas, my canvas is a square block which baries in size depending on the width of the phone (detects width and matches height).

My app is always displayed in portrait mode and therefore this leaves a gap underneath my canvas. Due to all the various screen sizes this space under the canvas is constantly changing. Within this section I would like to add a layout, allowing me to add textviews and a couple of image buttons. I am currently doing this all within onDraw however this is very messy code and means I have 3 variations of the code due to the vast size differences between screens.

I currently have a Game class, which in turn calls the GameView which consists of all the onDraw code, the question is how can I add a layout to fill whatever space is left under the canvas? Please see below for a basic breakdown of the Game/ GameView classes:

GAME CLASS

public class Game extends Activity 
{
    @Override
    public void onCreate(Bundle bundle) 
    {
        super.onCreate(bundle);
        setContentView(R.layout.test);
        Intent intent = getIntent();
        Bundle extras = intent.getExtras();
        this.maze = (Maze)getLastNonConfigurationInstance();
        if(this.maze == null) 
        {
            this.maze = (Maze)extras.get("maze");
        }

        // This is where I am setting the view, this leads to my onDraw code which progromatically creates as maze.
        // This is a square box taking the width of the screen as the dimensions for the square.
        GameView view = (GameView)findViewById(R.id.gameview);
        view.setMaze(this.maze);
        setContentView(view);
    }
}

GAMEVIEW CLASS - With a small snippet of the manually created text content under the canvas

public class GameView extends View
{
    // This is the second canvas within the maze, which sites below the main game maze which is the square i mentioned previously.
    // This is where i need to add a layout which dynamically fills any remaining space.
    protected void onDraw(Canvas canvas) 
    {
        // Setting the canvas size for previous calcuated values.
        canvas.drawRect(0, 0, width, height, background);
        if((PhoneWidth < PhoneHeight) && (PhoneWidth < 600))
        {
            canvas.drawBitmap(arrows, QTRWidth * 2, height + 50, null);

            if(CharacterCount >= 3)
            {
                canvas.drawText(Characters.get(2).Name(), 10, height + 135, GrayTextMedium);
                // HIT POINTS
                if((float)Characters.get(2).HitPoints() / (float)Characters.get(2).HitPointsMax() < 0.11)
                    canvas.drawText("HP: " + Characters.get(2).HitPoints(), 10, height + 160, RedTextMedium);
                else
                    canvas.drawText("HP: " + Characters.get(2).HitPoints(), 10, height + 160, GrayTextMedium);
                // MAGIC POINTS
                if((float)Characters.get(0).MagicPoints() / (float)Characters.get(0).MagicPointsMax() < 0.11)
                    canvas.drawText("MP: " + Characters.get(2).MagicPoints(), QTRWidth, height + 160, RedTextMedium);
                else
                    canvas.drawText("MP: " + Characters.get(2).MagicPoints(), QTRWidth, height + 160, GrayTextMedium);
            }
            if(CharacterCount == 1) { canvas.drawText("MONEY: " + Characters.get(0).Money(), 10, height + 80, GrayTextMedium); }
            if(CharacterCount == 2) { canvas.drawText("MONEY: " + Characters.get(0).Money(), 10, height + 135, GrayTextMedium); }
            if(CharacterCount == 3) { canvas.drawText("MONEY: " + Characters.get(0).Money(), 10, height + 190, GrayTextMedium); }
        }
    }
}

Could someone please help me clean up this code, or point me to a detailed tutorial elsewhere. I have been looking into this and trying various things to no avail, therefore any help would be much appreciated. Thanks.

Answer 1

I am looking to implement a xml layout below my canvas, my canvas is a square block which baries in size depending on the width of the phone (detects width and matches height).

Then wrap the GameView in another layout and put whatever you want below that(use this layout in the Game activity):

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent">
    <your.GameView android:layout_width="match_parent" android:layout_height="wrap_content"/>
    <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"/>
</LinearLayout>

Assuming that your current GameView properly overrides the onMeasure() method to make itself a square then the RelativeLayout will get all the leftover space, where you could put the extra views.

Due to all the various screen sizes this space under the canvas is constantly changing. Within this section I would like to add a layout, allowing me to add textviews and a couple of image buttons.

Do you plan to add extra views based on the space available(for example if the height is bigger then x then also add a TextView or something like this on top of some buttons?)? If yes, then make your own layout for that gap and in the onMeasure() method of that custom layout see the available space and use only the views that fit in that space.