Align buttons inside a TableRow

Question

I'm developing an Android application.

I have this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="200px"
  android:orientation="vertical">
  <TextView
        android:id="@+id/gameTitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="left"
        android:layout_margin="5px"
        android:text="aaaaa"/>
  <TextView
        android:id="@+id/gameDescription"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="left"
        android:layout_margin="5px"
        android:typeface="sans"
        android:textSize="16sp"
        android:textStyle="bold"
        android:text="dddddd"/>
  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ButtonsTable"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <Button
                android:text="@string/yes"
                android:id="@+id/playGame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <Button
                android:text="@string/no"
                android:id="@+id/noPlayGame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

I want to put playGame button in the left side of the center, and noPlayGame button in the right side of the center.

Now, both appear aligned to the left of the TableRow.

How can I do this?

Thank you.

EDIT: I've added the complete layout and the modifications suggested by Ashay.
2nd EDIT:
THE SOLUTION
I've added to TableLayout the following: android:stretchColumns="0,1". Now the buttons are center aligned but they fill their entiry column!!!

Solution 1

I hope this helps:

<TableRow
    android:id="@+id/tableRow1"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/stringtxt1"></Button>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:text="@string/stringtxt2"
        android:layout_height="wrap_content"
        android:layout_gravity="center|center_horizontal"></Button>
</TableRow>

Solution 2

I posted my code, I hope that will help others users to resolve theirs problems (center content). I wanted to center two buttons in table row, here is my code, which solve this problem:

we indicate which columns will be stretched in prop android:strechColumns="a,b.." using comma-delimited list

      <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/buttonGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0,1" > 

        <TableRow>
            <Button
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/button1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/button1Name" 
                android:layout_gravity="right"/>

            <Button
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/button2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/button2Name" 
                android:layout_gravity="left"/>
        </TableRow>
    </TableLayout>

I hope that it will help. Sorry for my english :/

Solution 3

For centering a single button on a single row:

<TableRow android:id="@+id/rowNameHere"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:gravity="center">
    <Button android:id="@+id/btnDoStuff"
            android:text="Do Stuff" />
</TableRow>

After reviewing the above answers, I grabbed a few things from each answer and this worked for me.

Solution 4

Remove this line <TableRow android:layout_gravity="center"> And give android:fill_containt in table row for both height & width

EDITED ANSWER: Well, I'm so sorry for the last posts spelling mistake

Through XML it seems impossible for TableLayout. You need to set this UI in code in oncreate. In your java file you can set those by using below.

playGame.setWidth(ScreenWidth()/2-var);
noPlayGame.setWidth(ScreenWidth()/2-var);

here var can be used to set the distance between these 2 buttons like 10 or 30. Also, your xml will get change as follows:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ButtonsTable"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center">
            <Button
                android:text="yes"
                android:id="@+id/playGame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"/>
            <Button
                android:text="no"
                android:id="@+id/noPlayGame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"/>
        </TableRow>
</TableLayout>

The method ScreenWidth() can be used for getting width of the screen through these methods

private int ScreenWidth() {
        DisplayMetrics dm=new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        String width=""+dm.widthPixels;
        return Integer.parseInt(width);
}

Solution 5

I added two dummy textviews to align my button in the center.

<TableRow>
    <TextView 
        android:text=""
        android:layout_weight=".25" 
        android:layout_width="0dip"         
        />
    <Button 
        android:id="@+id/buttonSignIn" 
        android:text="Log In"
        android:layout_height="wrap_content"
        android:layout_weight=".50" 
        android:layout_width="0dip" 
        />
    <TextView 
        android:text=""
        android:layout_weight=".25" 
        android:layout_width="0dip"         
    />
</TableRow>

View more solutions

Comments

[VansFannel]

android:fill_containt? I haven't found this "property" on android's documentation.

[VansFannel]

I have edit the question adding in more details. Your answer doesn't work for me.

[Kennethvr]

is this the only solution? I don't think this is the correct one.... adding empty textviews to center a button?

[Sam]

Thank you!! android:gravity="end" works for me to align button to the right of table row.

[dyslexicanaboko]

I'm glad I could help. I'm shocked that this answer is still relevant after so many years.