Android make canvas cover half screen

Question

I'm trying to create an app for drawing some simple lines in a canvas. I want the canvas to take up the top 50% of the screen, leaving the bottom 50% of the screen for buttons and what not. I am currently using setContentView(canvas); which makes it so that the canvas takes up 100% of the screen.

Answer 1

You can create a class that extends View and do drawing inside that view on onDraw() method of that view. Add that view to your layout with any width or height you choose.

Answer 2

Instead of setContentView, use your layout XML to create a view to hold the canvas as shown in Error referencing an inner class View in layout/main.xml.

After that, it's a matter of using a technique in android:layout_height 50% of the screen size such as:

<LinearLayout ...>
<view
    class="com.example.foo.FooActivity$Drawer"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
/>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
>
</LinearLayout>

You can also use, say, android:layout_weight="0.7" and "0.3" to set the canvas/button container to 70% and 30% of the screen respectively.

Here's a minimal, complete example:

Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:keepScreenOn="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#f00"
>
    <view
        class="com.example.foo.FooActivity$Drawer"
        android:background="#00f"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
    />
    <LinearLayout
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
    >
        <Button
            android:id="@+id/start"
            android:text="@string/start"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#f0f"
            android:padding="10dp"
            android:layout_margin="20dp"
        />
        <Button
            android:id="@+id/stop"
            android:text="@string/stop"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#f0f"
            android:padding="10dp"
            android:layout_margin="20dp"
        />
    </LinearLayout>
</LinearLayout>

Activity:

package com.example.foo;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.View;

public class FooActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_foo);
    }

    public static class Drawer extends View {
        private static Paint paint;
        private static int viewWidth;
        private static int viewHeight;

        public Drawer(Context con, AttributeSet attr) {
            super(con, attr);
            paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            paint.setStyle(Paint.Style.FILL);
        }

        // https://stackoverflow.com/a/9718512/6243352
        @Override
        protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
            super.onSizeChanged(xNew, yNew, xOld, yOld);
            viewWidth = xNew;
            viewHeight = yNew;
        }

        @Override
        protected void onDraw(final Canvas c) {
            super.onDraw(c);
            paint.setARGB(255, 0, 0, 0);
            int cx = viewWidth / 2;
            int cy = viewHeight / 2;
            c.drawCircle(cx, cy,viewWidth / 4, paint);
        }
    }
}

Result: