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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With