Question

I have a TableLayout consisting of some buttons. I want to draw a rectangle around the TableLayout. I am not sure how this could be done. From my research, I found that I would need to extend a View and use the onDraw event of this view. But, the point I am confused with is “How is it possible to include the TableLayout within the View”?

Thanks in advance for your answers.

My sample code is

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/numkeypad"
         android:orientation="vertical"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:stretchColumns="*"
         android:layout_gravity="bottom"
         android:visibility="visible"
         android:background="@color/contents_text"
    >
<TableRow>
    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="0dp"
                  android:background="#404040"
                  android:layout_span="2">
        <Button android:id="@+id/Test1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Test1"
                android:textSize="20dp"
                android:textStyle="bold"
                >
        </Button>
        <Button android:id="@+id/Test2"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Test2"
                android:textSize="20dp"
                android:textStyle="bold"
                >
        </Button>
    </LinearLayout>
</TableRow>
<TableRow>
    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="0dp"
                  android:background="#404040"
                  android:layout_span="2">
        <Button android:id="@+id/Test11"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Test11"
                android:textSize="20dp"
                android:textStyle="bold"
                >
        </Button>
        <Button android:id="@+id/Test22"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:textColor="#000000"
                android:text="Test22"
                android:textSize="20dp"
                android:textStyle="bold"
                >
        </Button>
    </LinearLayout>
</TableRow>

</TableLayout>

And the output I have is

And what I want is something like

Answer 1

You can extend FrameLayout to draw the rectangle according to it’s dimensions in the onDraw() method (after calling super.onDraw() of course)
Say you extended class is com.example.MyFrameLayout.

Then you can declare the following layout:

<?xml version="1.0" encoding="utf-8"?>
<com.example.MyFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/numkeypad"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stretchColumns="*"
        android:layout_gravity="bottom"
        android:visibility="visible"
        android:background="@color/contents_text">

        ...
    </TableLayout>
</com.example.MyFrameLayout>