Need help with Android TableLayout alignment

Question

I'm trying to build a calculator layout using TableLayout, but the last two rows aren't aligning with the rest of the layout. Is there something wrong with my layout XML?

What I'm trying to do would be easier to accomplish in HTML (<td> with colspan or rowspan), so should I try converting this into a WebView?

Code is as follows: (Screenshot)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText
        android:id="@+id/EditText01"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" />
    <TableLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:stretchColumns="*">
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            <Button
                android:id="@+id/Button08"
                android:textSize="16pt"
                android:text="^"
                android:layout_weight="1"
                android:layout_height="fill_parent"
                android:layout_width="wrap_content" />
            <Button
                android:id="@+id/Button09"
                android:text="÷"
                android:textSize="16pt"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_width="wrap_content" />
            <Button
                android:id="@+id/Button10"
                android:text="×"
                android:textSize="16pt"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_width="wrap_content" />
            <Button
                android:id="@+id/Button11"
                android:textSize="16pt"
                android:text="-"
                android:layout_weight="1"
                android:layout_height="fill_parent"
                android:layout_width="wrap_content" />
        </TableRow>
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:layout_weight="1">
                <Button
                    android:id="@+id/Button01"
                    android:text="7"
                    android:textSize="16pt"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:layout_width="fill_parent" />
                <Button
                    android:layout_height="wrap_content"
                    android:textSize="16pt"
                    android:text="4"
                    android:id="@+id/Button05"
                    android:layout_weight="1"
                    android:layout_width="fill_parent" />
            </LinearLayout>
            <LinearLayout
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                android:layout_width="fill_parent">
                <Button
                    android:id="@+id/Button02"
                    android:layout_height="wrap_content"
                    android:text="8"
                    android:textSize="16pt"
                    android:layout_weight="1"
                    android:layout_width="fill_parent" />
                <Button
                    android:layout_height="wrap_content"
                    android:textSize="16pt"
                    android:text="5"
                    android:id="@+id/Button06"
                    android:layout_weight="1"
                    android:layout_width="fill_parent" />
            </LinearLayout>
            <LinearLayout
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                android:layout_width="fill_parent">
                <Button
                    android:id="@+id/Button03"
                    android:text="9"
                    android:textSize="16pt"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1" />
                <Button
                    android:textSize="16pt"
                    android:text="6"
                    android:id="@+id/Button07"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1" />
            </LinearLayout>
            <Button
                android:id="@+id/Button04"
                android:text="+"
                android:textSize="16pt"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="1" />
        </TableRow>
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:layout_weight="2">
                <LinearLayout
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">
                    <Button
                        android:id="@+id/Button02"
                        android:textSize="16pt"
                        android:layout_weight="1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="1" />
                    <Button
                        android:textSize="16pt"
                        android:id="@+id/Button06"
                        android:layout_weight="1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="2" />
                </LinearLayout>
                <Button
                    android:id="@+id/Button01"
                    android:layout_height="wrap_content"
                    android:textSize="16pt"
                    android:layout_weight="1"
                    android:layout_width="fill_parent"
                    android:text="0" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:layout_weight="1">
                <Button
                    android:id="@+id/Button03"
                    android:textSize="16pt"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="3" />
                <Button
                    android:textSize="16pt"
                    android:id="@+id/Button07"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="." />
            </LinearLayout>
            <Button
                android:id="@+id/Button04"
                android:textSize="16pt"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:text="=" />
        </TableRow>
    </TableLayout>
</LinearLayout>

Photochromy

Obviously '=' button is taking more space than what you intended. Try adjusting layout_weight parameter of the '=' button. – Shaddock

"but the last two rows aren't aligning with the rest of the layout" -- I can't see your screen from here. Can you post a screenshot of what you are seeing? If you have a mockup that shows what you are trying to achieve, so much the better. – Unweave

primalpop, I changed its weight to 0 and now I have img683.imageshack.us/img683/2043/calculatorandroidlayout.png . Is there a way that I can have a table cell cover multiple rows/columns without using nested LinearLayouts? CommonsWare, img185.imageshack.us/img185/2043/calculatorandroidlayout.png was the original one and img683.imageshack.us/img683/2043/calculatorandroidlayout.png is the current version. – Photochromy

I had made a similar layout using Nested Linear Layouts only. For me its easier using it, although it may be a little heavier than maybe Relative Layout. – Shaddock

Answer 1

Your final TableRow has three cells (i.e., immediate children). The rest have four. Hence, they're not going to align unless you put an android:layout_span attribute in there somewhere to indicate which cell is absorbing the fourth.

Unweave

I set the "cell" containing 0, 1, and 2 to span two cells and put the equals sign back to weight 1, and it works like a charm! Thanks! – Photochromy