Android: How do I set column width for unequal quantities of buttons?

104 views Asked by At

I have 3 columns of buttons, but the columns don't all contain the same quantity of buttons. What is the best practice for making all of the buttons appear the same size? I don't want to explicitly specify the button widths and I doubt that adding "dummy" buttons is best either.

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="Button 1"
            android:id="@+id/button1" />
        <Button
            android:layout_width="0dip"
            android:text="Button 2"
            android:id="@+id/button2"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dip"
            android:text="Button 3"
            android:id="@+id/button3"
            android:layout_weight="1"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button 4"
            android:id="@+id/button4" />

        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="Button 5"
            android:id="@+id/button5"
            android:layout_column="3" />
    </TableRow>

</TableLayout>
2

There are 2 answers

0
Amirul Zin On BEST ANSWER

This is more like a math problem. For centering odds (3) and even (2) in an expandable grid space, you'll need in total a six celled layout.

Here's the solution (without any extra views and not using layout weights):

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:stretchColumns="*">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_column="0"
            android:layout_span="2"
            android:text="Button 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_column="2"
            android:layout_span="2"
            android:text="Button 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_column="4"
            android:layout_span="2"
            android:text="Button 3" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:id="@+id/button4"
            android:layout_column="1"
            android:layout_span="2"
            android:text="Button 4" />

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_column="3"
            android:layout_span="2"
            android:text="Button 5" />
    </TableRow>
</TableLayout>
0
Phuc Tran On

You can add three buttons as usual and hide the last button like below

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="Button 1"
            android:id="@+id/button1" />
        <Button
            android:layout_width="0dip"
            android:text="Button 2"
            android:id="@+id/button2"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dip"
            android:text="Button 3"
            android:id="@+id/button3"
            android:layout_weight="1"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:text="Button 4"
            android:id="@+id/button4" />
        <Button
            android:layout_width="0dip"
            android:text="Button 5"
            android:id="@+id/button5"
            android:layout_weight="1" />
        <Button
            android:layout_width="0dip"
            android:text="Button 6"
            android:id="@+id/button6"
            android:layout_weight="1"
            android:visibility="invisible"/>
    </TableRow>

</TableLayout>