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.

Tangelatangelo

Answer 1

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

Donnetta

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

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

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

@Cumulative 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. – Donnetta

@Cumulative it works perfectly on froyo , ics and gingerbread. tested. – License

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

Answer 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://mcmap.net/q/246353/-xml-table-layout-two-equal-width-rows-filled-with-equally-width-buttons

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>

Cumulative

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

Much better than anything else I have found. – Show

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

Dhumma

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

Answer 4

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

Veneration