how to put 9 buttons in 3 rows in android xml layout?

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.

Tarsem Singh · Accepted Answer · 2013-07-29T09:23:34.407

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>

Oh thank you very much, that works very well. But Im also wondering why I cant do it with gridlayout. I specified the rowcound and columncount to be 3 and put 9 buttons in 0,0, 0,1, 0,2, 1,0, ... But I cant let them take the space evenly. Do you have any ideas? thank you again! — sy19890515, Jul 30 '13 at 03:54
@sy19890515 welcome :) for that check this link http://stackoverflow.com/questions/15261088/gridview-with-two-columns-and-auto-resized-images may help you ! — Tarsem Singh, Jul 30 '13 at 04:46

score 1 · Answer 2 · edited Oct 28 '13 at 11:13

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();
    }
});


}

I tried using gridview but it just gave me a series of texts "item #(where # is from 1 to some number)" going all the way down. how do I put buttons on gridview and how to tell it only give me 9 buttons? and I want to work on the xml file first. thanks~ — sy19890515, Jul 29 '13 at 08:56
for that you will have to use custom adapter. check this link http://www.mkyong.com/android/android-gridview-example/ — rachit, Jul 29 '13 at 09:54

score 1 · Answer 3 · answered Jul 29 '13 at 09:15

<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

score 1 · Answer 4 · answered Jan 24 '14 at 17:20

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>

`

score 0 · Answer 5 · answered Jul 29 '13 at 08:20

0

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

answered Jul 29 '13 at 08:20

RajeshVijayakumar

10,281
11
57
84

I tried this but I dont know how to specify the number of rows I want. I can only tell it the number of columns and it gave me a bunch of items going all the way down... and I can put button on it as well... – sy19890515 Jul 29 '13 at 08:59

how to put 9 buttons in 3 rows in android xml layout?

5 Answers5

Linked