Make cells same width and height to fill the table

Question

I'm trying to learn how to use table layouts in android, this is my code:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dip" >

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

        <Button
            android:id="@+id/button2"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>
</TableLayout>

And this is the result:

How can I make the TableRow to fit the width of the TableLayout and the height to the TableLayout height? In simple words, I would like to have all columns with the same width and rows with the same height filling the TableLayout, is it possible? How?

Answer 1

You need to play with weight values. The xml for two rows would look like this.-

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 3 columns -->

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 3" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Column 3" />
    </TableRow>

</TableLayout>

And this is the result.-

---

As a side note, notice that fill_parent is deprecated, you should use match_parent instead.

Answer 2

The quickest way would be to use layout_weight with the objects in your table row. Here's how your xml should look after specifying it.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Column 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Column 3" />
    </TableRow>
</TableLayout>

When using weight, you want to set the layout_width to 0dp so that it can override the actual value. This split will give you each view taking up 1/3 of the TableRow. Play around with the weight value until you've got something you like.

Answer 3

add android:layout_weight="0.3" to the child's inside TableRow try to replace your layout xml to this

hope this what you are looking for

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="5dip" >

        <TextView
            android:id="@+id/textView2"
            android:layout_weight="0.3"
            android:text="Column 1" />

        <Button
            android:id="@+id/button2"
            android:layout_weight="0.3"
            android:text="Column 2" />

        <Button
            android:id="@+id/button3"
            android:layout_weight="0.3"
            android:text="Column 3" />
    </TableRow>
</TableLayout>