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.

Answer 1

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

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://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>

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.

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