XML Table layout? Two EQUAL-width rows filled with equally width buttons?
Solution 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.
Solution 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>
Solution 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!
Solution 4
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>
Solution 5
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>
Oliver Goossens
Updated on April 14, 2020Comments
-
Oliver Goossens about 4 years
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...
-
Fran Fitzpatrick over 12 yearsHow does one set these values in code for dynamically created buttons?
-
Robby Pond over 12 yearsparant.addView(newView, new LinearLayout.LayoutParams(0 /*width*/, WRAP_CONTENT, 1 /*weight*/));
-
Unoti over 12 yearsIf 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 stackoverflow.com/questions/1177020/….
-
Amit almost 12 yearsHow can we make two rows of equal Height ? Please see my question stackoverflow.com/q/10779802/720176
-
Harin Kaklotar almost 5 yearsit's perfect answer for table layout +1