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.

Solution 1

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

Solution 2

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>

Solution 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.

Comments

[Timmmm]

This does not work. At least with the latest version of android.

[Timmmm]

This does not work either. With everything having layout_weight=1 I still have unequal sized buttons.

[Mark B]

@Timmmm You so sure about that? It's still in the documentation: developer.android.com/reference/android/widget/…

[Timmmm]

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.

[Mark B]

@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.

[h4ck3d]

@Timmmm it works perfectly on froyo , ics and gingerbread. tested.

[IcedDante]

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...

[SH7890]

Much better than anything else I have found.

[mcy]

It works for dynamically added compound views on api level 23+