37

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

4 Answers 4

71

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.

3
  • 12
    More importantly, if you do this, dump TableLayout and switch to LinearLayout. TableLayout is designed for cases where you need Android to compute column widths based on cell contents. If you are purposefully ignoring that, you may as well use nested LinearLayouts instead. Jan 18, 2011 at 14:40
  • @ChristianB: Thanks for the explanation. I always thought that there must be something "wrong" with the TableLayout. Interestingly many failing TableLayouts work perfect with the 2.3 emulator. @dbm: With layout_width set to 0dp all child views (TextView/EditText) disappeared. Thanks anyway. I will check CommonsWares' solution and drop the TableLayouts completely. Don't know what they are good for if you need to know what might be printed in them and might mess them up ... Jan 18, 2011 at 16:46
  • 3
    @CommonsWare: Can't believe why I took TableLayouts? Changing them to LinearLayout worked perfect. Thank you very much. Jan 18, 2011 at 17:04
30

This is how I format my tables evenly. Not part of your question but to span all columns android:layout_span="2" on other TableRow children that do not contain the android:layout_column attribute. Hope this helps.

<TableLayout 
  android:id="@+id/tableLayout1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:stretchColumns="0,1">

    <TableRow
      android:id="@+id/tableRow1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">

        <TextView
          android:id="@+id/textView1"
          android:layout_column="0">
        </TextView>

        <TextView
          android:id="@+id/textView2"
          android:layout_column="1">
        </TextView>

    </TableRow>

</TableLayout> 
1
  • android:stretchColumns="0,1" in this case can be replaced with just android:stretchColumns="*" Feb 19, 2020 at 16:03
18

I would create a table layout Inside a frame layout holding your control. In this example I have two columns layout and I put two ImageView's centered in each column.

    <TableLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">

        <TableRow>
            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">

                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/button_wedding_day_cheat_sheet" 
                    android:id="@+id/buttonWeddingDayCheatSheet"
                    android:onClick="onClickWeddingDayCheatSheet"
                    android:layout_gravity="center_horizontal">
                </ImageView>
            </FrameLayout>

            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">
                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/button_share_favorite_recipe" 
                    android:id="@+id/buttonShareFavoriteRecipe"
                    android:onClick="onClickShareFavoriteRecipe"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                </FrameLayout>
            </TableRow>

    </TableLayout>
1
  • 1
    This worked for me. I did have to add center_vertical to the FrameLayout elements though.
    – Steven
    Nov 9, 2013 at 1:38
0

The columns in the android table always adjust to the widest view which in any row. There are no explicit controls here of the columns. Grid view has more control of the column size such as: android:columnWidth="100dp"

If the left and righ view in the table would be set to the same size then a centered table could have two 50% spaced columns.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.