Buttons to fill width when using TableLayout

Question

I have a table having 2 rows each row having 3 buttons. How can I make the buttons to fill the space equally. In HTML I would give them 33% width.

Also do you know any way I can create a view having 4 image buttons in a row as a grid layout, similar to the launcher.

score 41 · Accepted Answer · answered Feb 10 '10 at 15:09

41

Try adding android:stretchColumns="*" to your <TableLayout> tag.

answered Feb 10 '10 at 15:09

Mark B

183,023
24
297
295

This does not work. At least with the latest version of android. – Timmmm Jan 11 '12 at 20:43
1

@Timmmm You so sure about that? It's still in the documentation: http://developer.android.com/reference/android/widget/TableLayout.html#attr_android:stretchColumns – Mark B Jan 11 '12 at 22:39
Yes. You need to set the weight, and set the width to 0. And you *don't* need to set stretchColumns. The Android documentation is no guarantee of anything! See my working example below. – Timmmm Jan 12 '12 at 22:59
@Timmmm That's one way to do it. But the stretchColumns thing works just fine for me, including on my Galaxy Nexus running the latest version of Android. Thus, you have some other problem with your layout if that isn't working for you. Also I've never found any issues with the Android API docs. – Mark B Jan 13 '12 at 02:03
@Timmmm it works perfectly on froyo , ics and gingerbread. tested. – h4ck3d Jul 11 '12 at 17:48
It works for dynamically added compound views on api level 23+ – mcy Nov 25 '17 at 11:53

score 17 · Answer 2 · edited May 23 '17 at 11:54

I finally found the true answer here: http://androidadvice.blogspot.com/2010/10/tablelayout-columns-equal-width.html

There is a more minimal example on stackoverflow also here: https://stackoverflow.com/a/2865558/265521

Example:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <TableRow>
        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:text="Why is doing layouts on Android"
            android:layout_weight="1"
            />
        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:text="so"
            android:layout_weight="1"
            />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:text="damn"
            android:layout_weight="1"
            />
        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:text="frustrating?"
            android:layout_weight="1"
            />
    </TableRow>
</TableLayout>

It seems like this solution wouldn't be responsive. 3 columns would look on a modern mobile device but might squish things too much on a smaller screen and would be way to wide on a tablet... — IcedDante, Apr 28 '17 at 22:51

score 3 · Answer 3 · answered Feb 10 '10 at 17:03

3

Set the TableRow layout_width to fill_parent and set a layout_weight of 1 on each button.

The layout_weight works sort of like a percentage. If all of your items get the same number, they take the same percent of space. If one button has a weight of 2, and another has a weight of 1, then the first will take up twice as much space.

If you haven't done so already, ready through the common layouts page of the dev guide for a good intro to layouts.

answered Feb 10 '10 at 17:03

Cheryl Simon

46,552
15
93
82

This does not work either. With everything having layout_weight=1 I still have unequal sized buttons. – Timmmm Jan 11 '12 at 20:49

score 0 · Answer 4 · edited Feb 27 '17 at 11:24

So in conclusion of the posts, the right way to do it is to set the NumberOfTheColumns:

   <tablelayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:stretchColumns="NumberOfTheColumns"/>

You can set how many horizontal "piece" you need. If you have a 3x3 table:

 <TableLayout
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tableLayout1"
    android:stretchColumns="3">
    <TableRow
        android:id="@+id/tableRow1">
        <TextView
            android:text="@string/EventTitle"
            android:id="@+id/textView1"
            android:gravity="center_vertical"
            android:layout_column="0" />
        <EditText
            android:inputType="text"
            android:id="@+id/editText3"
            android:layout_weight="2"
            android:layout_span="2"
            android:layout_column="1" />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow2">
        <TextView
            android:text="@string/EventDateStart"
            android:id="@+id/textView1"
            android:gravity="center_vertical"
            android:layout_column="0" />
        <EditText
            android:inputType="date"
            android:id="@+id/editText1"
            android:layout_weight="1"
            android:layout_column="1"
            android:layout_width="wrap_content" />
        <EditText
            android:inputType="time"
            android:id="@+id/editText2"
            android:layout_weight="1"
            android:layout_column="2"
            android:layout_width="match_parent" />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow3">
        <TextView
            android:text="@string/EventDateEnd"
            android:id="@+id/textView1"
            android:gravity="center_vertical"
            android:layout_column="0"
            android:layout_width="match_parent" />
        <EditText
            android:inputType="date"
            android:id="@+id/editText1"
            android:layout_weight="1"
            android:layout_column="1" />
        <EditText
            android:inputType="time"
            android:id="@+id/editText2"
            android:layout_weight="1"
            android:layout_column="2" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="@string/Description"
            android:id="@+id/textView1"
            android:gravity="center_vertical"
            android:layout_weight="3"
            android:layout_span="3"
            android:layout_column="0"
            android:layout_width="match_parent" />
    </TableRow>
    <TableRow>
        <EditText
            android:inputType="textMultiLine"
            android:id="@+id/editText3"
            android:layout_height="50dp"
            android:layout_weight="3"
            android:layout_span="3"
            android:layout_column="0"
            android:layout_width="match_parent" />
    </TableRow>
</TableLayout>

In this sample you can see a 5x3 table. You can set each column width by set how many pieces of the full table width do you need...

Buttons to fill width when using TableLayout

4 Answers4