Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align buttons inside a TableRow

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

like image 813
VansFannel Avatar asked Oct 06 '10 13:10

VansFannel


People also ask

How do you align a button in a table cell?

We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.

How do I center a button in XML?

If you have a single Button in your Activity and you want to center it the simplest way is to use a RelativeLayout and set the android:layout_centerInParent=”true” property on the Button.


5 Answers

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>
like image 195
Vale Avatar answered Oct 18 '22 10:10

Vale


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 :/

like image 35
Bobu Avatar answered Oct 18 '22 10:10

Bobu


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.

like image 38
dyslexicanaboko Avatar answered Oct 18 '22 08:10

dyslexicanaboko


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>
like image 36
Vivek Iyer Avatar answered Oct 18 '22 09:10

Vivek Iyer


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);
}
like image 31
Ashay Avatar answered Oct 18 '22 08:10

Ashay