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.