XML table layout? Two rows of EQUAL-width filled with buttons with the same width?

Question

Here is part from my XML for the LAND format:

<TableLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:stretchColumns="*"> <TableRow> <Button android:id="@+id/countbutton" android:text="@string/plus1"/> <Button android:id="@+id/resetbutton" android:text="@string/reset" /> </TableRow> </TableLayout> 

And now, what I won’t get is the WIDTH of one line, as well as the button, depends on the TEXT inside the button. If both texts are equivalent, let's say: TEXT is good - half of the table is in the middle of the screen. But if they have different sizes - say, "A" and "THIS IS A BIG BUTTON", the CENTER of the table is no longer in the middle of the screen, so the buttons are not equal in width ...

Answer 1

To have buttons in rows where the buttons are the same size you need to do.

  <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dip"/> <Button android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dip"/> </LinearLayout> 

And fill in other xml properties for your buttons.

The magic is in the layout_weight and width properties. You do not need a table layout. These properties tell the layout that your views should occupy equal space in the parent layout.

Answer 2

Good example (originally from http://androidadvice.blogspot.com/2010/10/tablelayout-columns-equal-width.html )

Tested and working:

 <TableRow> <!-- Column 1 --> <TextView android:id="@+id/tbl_txt1" android:layout_width="0dip" android:layout_height="wrap_content" android:background="@color/red" android:textColor="@color/white" android:padding="10dip" android:layout_margin="4dip" android:layout_weight="1" android:text="Column 1" /> <!-- Column 2 --> <TextView android:id="@+id/tbl_txt2" android:layout_width="0dip" android:layout_height="wrap_content" android:background="@color/red" android:textColor="@color/white" android:padding="10dip" android:layout_margin="4dip" android:layout_weight="1" android:text="Column 2" /> <!-- Column 3 --> <TextView android:id="@+id/tbl_txt3" android:layout_width="0dip" android:layout_height="wrap_content" android:background="@color/red" android:textColor="@color/white" android:padding="10dip" android:layout_margin="4dip" android:layout_weight="1" android:text="Column 3" /> </TableRow> 

Answer 3

In addition to the accepted answer:

I had a similar problem when I needed multiple images in a grid with the same column widths, so I used a table layout. It worked, but as the images load asynchronously, the corresponding columns occupy the entire width until all the columns have at least one image.

I solved this with Robby Pond's solution, but it did not work for the last row, which did not necessarily have as many images as the other rows, stretching these images to cover all the free space when I wanted them to be inserted into the same columns, as above. To combat this, I populated the remaining empty columns of this row with regular View objects,

using the same layout options as all other images:

width = 0, weight = 1. And that solved!

Answer 4

Layout Fragment

 <TableLayout android:id="@+id/tablelayout" android:layout_width="match_parent" android:layout_height="match_parent" /> 

Code that programmatically sets the layout properties of buttons in a table:

 public void addButtons(View view) { TableLayout tableLayout = (TableLayout) findViewById(R.id.tablelayout); Context context = getApplicationContext(); tableLayout.removeAllViews(); for (int rowIndex = 0; rowIndex < ROWS; rowIndex++) { TableRow row = new TableRow(context); for (int columnIndex = 0; columnIndex < COLUMNS; columnIndex++) { Button btn = new Button(context); LayoutParams buttonParams = new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f); btn.setLayoutParams(buttonParams); row.addView(btn); } tableLayout.addView(row); } }