Question

I have a strange problem concerning a layout in my Android app (I’m learning it, so ofcourse I’m making a calculator 🙂 ). I have specified all the buttons to be 25% of the width of the row, but when I add the EditText at the top, the first column becomes a lot wider than the other three columns. (The screenshot is from the IntelliJ preview, but when I load the app on my devices the same results shows.

When I remove the EditText this problem disappears. I have tried adding weight attributes to the EditText in the XML, to no avail.

The result:

My Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
    <TableLayout android:layout_height="wrap_content"
                 android:layout_width="fill_parent"
                 android:weightSum="1.0">
        <TableRow android:layout_width="fill_parent"
                  android:weightSum="1.0">
            <EditText android:layout_weight="1.0"
                      android:text="Edit me"></EditText>
        </TableRow>
        <TableRow android:layout_width="fill_parent"
                  android:weightSum="1.0">
            <Button android:text="7"
                    android:layout_weight="0.25"></Button>
            <Button android:text="8"
                    android:layout_weight="0.25"></Button>
            <Button android:text="9"
                    android:layout_weight="0.25"></Button>
            <Button android:text="/"
                    android:layout_weight="0.25"></Button>
        </TableRow>
        <TableRow android:layout_width="fill_parent"
                  android:weightSum="1.0">
            <Button android:text="4"
                    android:layout_weight="0.25"></Button>
            <Button android:text="5"
                    android:layout_weight="0.25"></Button>
            <Button android:text="6"
                    android:layout_weight="0.25"></Button>
            <Button android:text="*"
                    android:layout_weight="0.25"></Button>
        </TableRow>
        <TableRow android:layout_width="fill_parent"
                  android:weightSum="1.0">
            <Button android:text="1"
                    android:layout_weight="0.25"></Button>
            <Button android:text="2"
                    android:layout_weight="0.25"></Button>
            <Button android:text="3"
                    android:layout_weight="0.25"></Button>
            <Button android:text="-"
                    android:layout_weight="0.25"></Button>
        </TableRow>
        <TableRow android:layout_width="fill_parent">
            <Button android:text="0"
                    android:layout_weight="0.25"></Button>
            <Button android:text="."
                    android:layout_weight="0.25"></Button>
            <Button android:text="+/-"
                    android:layout_weight="0.25"></Button>
            <Button android:text="="
                    android:layout_weight="0.25"></Button>
        </TableRow>
    </TableLayout>
</LinearLayout>

Answer 1

If your edit text fills the entire width of the screen, why not put it outside your table? like this?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">
    <EditText android:layout_width="fill_parent"
              android:layout_height="wrap_content"
                      android:text="Edit me"/>
    <TableLayout android:layout_height="wrap_content"
                 android:layout_width="fill_parent"
                 android:weightSum="1.0">
        <TableRow android:layout_width="fill_parent"
                  android:weightSum="1.0">
            ...