android - 2-column TableLayout with 50% exactly for each column

Question

This one puzzles me since my first steps with Android. I can't make both columns in a 2-column TableLayout exact 50% each.

Here's an example:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" >

    <TableLayout
        android:id="@+id/tablelayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:paddingRight="2dip" >

        <TableRow>
            <TextView
                style="@style/TextViewStandard"
                android_layout_span="2"
                android:layout_weight="1" 
                android:text="Bla" />
        </TableRow>

        <TableRow>
            <TextView
                style="@style/TextViewStandard"
                android:layout_weight="1"
                android:text="Name:" />

            <EditText
                style="@style/EditTextStandard"
                android:id="@+id/et_name"
                android:layout_weight="1" />
        </TableRow>

        <TableRow>
            <TextView
                style="@style/TextViewStandard"
                android:layout_weight="1"
                android:text="URL:" />

            <EditText
                style="@style/EditTextStandard"
                android:id="@+id/et_url"
                android:layout_weight="1" />
        </TableRow>

        <TableRow>
            <Button
                style="@style/ButtonStandard"
                android:layout_column="0"
                android:layout_marginTop="6dip"
                android:onClick="onClickOk"
                android:text="@android:string/ok" />
        </TableRow>
    </TableLayout>
</ScrollView>

And here's the corresponding style definition:

<resources>
    <style name="ButtonStandard" parent="@android:style/Widget.Button">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">fill_parent</item>
    </style>

    <style name="EditTextStandard" parent="@android:style/Widget.EditText">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">2dip</item>
        <item name="android:layout_marginRight">2dip</item>
        <item name="android:layout_marginTop">2dip</item>
        <item name="android:layout_width">fill_parent</item>
    </style>

    <style name="TextViewStandard" parent="@android:style/Widget.TextView">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">2dip</item>
        <item name="android:layout_marginRight">2dip</item>
        <item name="android:layout_marginTop">2dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:textColor">@android:color/white</item>
    </style>
</resources>

This becomes really messed up with a CheckBox involved.

What's wrong with my definition?

Many thanks in advance. HJW

Answer 1

Have you tried to set the android:layout_width attribute to 0dp (and of course keep the android:layout_weight as 1) on the child views?

I have been in similar scenarios when I also wanted to distribute the given space equally between two child views but failed to do so since the child with "wider content" also became wider, within its parent, than its sibling. This was due to the fact that the wider child had a greater initial width. Making sure both children started of from the same width (android:layout_width="0dp" on both of them) also guaranteed to distribute the space evenly among them.