XML Table layout? Two EQUAL-width rows filled with equally width buttons?

Question

Here's a part from my XML for 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 dont get - the WIDTH of one row and also of the button depends on the TEXT inside the button. If the both texts are equaly long lets say : TEXT its ok - the table half is in the middle of the screen. But if they have different size - lets say "A" and "THIS IS THE LONG BUTTON" the CENTER of the table isnt in the middle of the screen anymore and so the buttons are not equally width...

Seller

I added my answer here , hope this may help you https://mcmap.net/q/247009/-android-tablelayout-width – Stu

Answer 1

To have buttons in rows where 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 the other xml properties for your buttons.

The magic is in the layout_weight and width properties. You don't need the Table layout. These properties tell the layout that your views should take up equal space in the parent layout.

Oysterman

How does one set these values in code for dynamically created buttons? – Jaramillo

parant.addView(newView, new LinearLayout.LayoutParams(0 /*width*/, WRAP_CONTENT, 1 /*weight*/)); – Oysterman

If you're finding this via search, note that you need to do a android:layout_width="fill_parent" or other value on the LinearLayout. I was getting errors at runtime about how I need to specify a layout_width, and it took me a while to figure out that it was complaining about the LinearLayout, not the contained items with the zero value layout widths. See also #1177520. – Syconium

How can we make two rows of equal Height ? Please see my question https://mcmap.net/q/247010/-how-to-customize-the-layout-height-and-width-and-containership-of-layouts/720176 – Lieselotteliestal

Answer 2

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

Disbelief

Answer 3

In addition to the accepted answer:

I had a similar problem where I needed several images in a grid with equal column widths, so I used a table layout. It worked, but as the images loaded asynchronously, the corresponding columns would take up the entire width until all columns had at least one image in them.

I solved this using Robby Pond's solution, but it didn't work for the last row, which didn't necessarily have as many images as the other rows, stretching those images to take up all available space when I wanted them to fit in the same columns as above. To combat this, I filled the remaining empty columns of that row with regular View objects,

using the same layout parameters as all the other images:

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

Seltzer

it's perfect answer for table layout +1 – Lynelllynelle

Answer 4

Try This: Tested and working:

1)For tablelayout set android:stretchColumns="1"

2)Also set each item(column) layout_width="0dip" and layout_weight="1"

3)And do not set layout_width of tablerow

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
            android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin"
            tools:context="inext.smartshop.CustomerProfile.CustomerProfileView">


        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


            <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tablelayout"
            android:stretchColumns="1"
            android:layout_above="@+id/userProfilebtnsignout"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/relativeLayout">

            <TableRow

                android:layout_height="fill_parent"
                android:padding="5dp"
                android:id="@+id/detailsTableRow"
                android:gravity="center_horizontal">

                <TextView

                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Full Name :  "
                android:layout_width="0dip"
                android:layout_weight="1"
                android:id="@+id/textView8"
                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Ram Chhabra"

                android:id="@+id/userProfilename"

                android:gravity="left" />

            </TableRow>

            <TableRow android:padding="5dp"

                android:layout_height="wrap_content">

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Email Address :  "

                android:id="@+id/textView10"
                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="[email protected]"
                android:id="@+id/userProfileemail"
                android:gravity="left"
                 />
            </TableRow>

            <TableRow android:padding="5dp">

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Contact No 1 :  "
                android:id="@+id/textView12"

                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="8130032232"
                android:id="@+id/userProfilecontactone"
                 />
            </TableRow>



            </TableLayout>

        </RelativeLayout>

        </RelativeLayout>

Burson

Answer 5

First you need to add android:stretchColumns="*" to TableLayout.

Each TableRow needs to have android:layout_weight="1" in order to strech equaly.

Each button in TableRow needs to have android:layout_width="0dp".

Here is some example

 <TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TableRow
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button2" />
    </TableRow>

    <TableRow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button4" />
    </TableRow>
</TableLayout>

Indication

Answer 6

The layout snippet

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

The code that programmatically sets layout properties of buttons in the 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);
    }
}

Uriah