RelativeLayout and canvas costum view

Question

I would like to make an activity with this structure:

The idea is to put some text in the top, a banner allways in the top, the button OVER the banner and my canvas in the center of the view, using all the possible space.

I'm subclassing View to draw my canvas and overloading the onMeasure() method:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // Calculate the size of the board
    this.squareSize = MeasureSpec.getSize(widthMeasureSpec) / BOARD_NUM_ROWS;
    this.leftMargin = (MeasureSpec.getSize(widthMeasureSpec) - squareSize*BOARD_NUM_COLUMNS) / 2;
    this.topMargin  = this.leftMargin;

    // Set the size of the board to full width and aspect ratio height
    int desiredWidth  = MeasureSpec.getSize(widthMeasureSpec);
    int desiredHeight = this.topMargin + (BOARD_NUM_ROWS * this.squareSize) + this.topMargin;

    this.setMeasuredDimension(desiredWidth, desiredHeight);
}

And this is my XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".DrawLevelActivity"
    android:background="@color/activity_background">

        <TextView
            android:id="@+id/instructionsText"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <com.mycanvas.BoardCanvas 
            android:id="@+id/boardCanvas"
            android:gravity="center"
            android:layout_below="@+id/instructionsText"
            android:layout_centerVertical="true"
            android:padding="0dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/solveButton"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:layout_below="@+id/boardCanvas"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

        <com.google.ads.AdView
            xmlns:googleads="http://schemas.android.com/apk/lib/com.google.ads"
            android:id="@+id/adView"
            android:gravity="center"
            android:paddingTop="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:layout_alignParentBottom="true" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"

            googleads:adSize="BANNER"
            googleads:adUnitId="@string/admob_id" />

</RelativeLayout>

Unfortunately the button appear under the banner and I think that the reason is that the canvas is very large.

The set value in onMeasure() is always smaller than MeasureSpec.getSize(heightMeasureSpec)

Answer 1

The key here is to use a LinearLayout setting a layout_weight value just for your canvas. This way, the top and above views will wrap their content, and the canvas will fill the free space. The layout xml would look like this.-

<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:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical|center_horizontal"
        android:background="#990099"
        android:text="Some text here" />

    <RelativeLayout
        android:id="@+id/canvas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#999900"
        android:layout_weight="1">
        <!-- The canvas -->
    </RelativeLayout>

    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <RelativeLayout 
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#009999">
        <!-- The banner -->
    </RelativeLayout>

</LinearLayout>

Notice I set some hardcoded heights and colors so that you can easily see the results. This layout will render a view like this.-