how to put 9 buttons in 3 rows in android xml layo

Question

Im trying to make a tic-tac-toe game(android version). I want to make all the 9 buttons auto-sizing regarding to the width and the height of the device and put them evenly in a 3*3 grid. But I can only set the number for their sizes now. Can anyone tell me how to let them use the height and width of the parent and calculate their sizes?

Also, im using the grid layout now. Is this the best layout I should use for the tic-tac-toe game?

Thanks.

Answer 1

I am working on the exact same problem and got this to work with table layout. Hope this helps.

<TableLayout
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/editText1"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:padding="40dp" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style"  />

        <Button
            style="@style/button_style"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
           style="@style/button_style"  />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style"  />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style"  />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" >

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
           style="@style/button_style" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style"  />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/button_style" />
    </TableRow>
</TableLayout>

`

Answer 2

Use LinearLayouts with android:weightSum and android:layout_weight

Edit

Example :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="3" >

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

</LinearLayout>

Answer 3

Try this :

<GridView
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:horizontalSpacing="10dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

Answer 4

<LinearLayout
android:weightSum = 1.0
>
  <LinearLayout
    android:weightSum=1.0
    android:layout_weight = 0.33
    android:orientation = horizontal
  >
    <Button
      android:layout_weight=0.33
    />
    <Button
      android:layout_weight=0.33
    />
   <Button
     android:layout_weight=0.33
   />
 </LinearLayout>
  //Similar to above LinearLayout of Buttons add 2 more LinearLayouts

Answer 5

You can use GridView. It will distribute buttons evenly.

<GridView
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:horizontalSpacing="5dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:verticalSpacing="5dp" />`

in your activity use this code

GridView gridView;

static final String[] numbers = new String[] { 
"A", "B", "C",
    "D", "E", "F", 
    "G", "H", "I"};

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

gridView = (GridView) findViewById(R.id.gridview);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
        android.R.layout.simple_list_item_1, numbers);

gridView.setAdapter(adapter);

gridView.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v,
        int position, long id) {
       Toast.makeText(getApplicationContext(),
        ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
    }
});


}