How to put 9 buttons in 3 lines in android xml layout?

Question

I am trying to make a tic-tac-toe game (Android version). I want all 9 buttons to be automated in width and height of the device and evenly place them in a 3 * 3 grid. But now I can only set their sizes. Can someone tell me how to let them use the height and width of the parent and calculate their sizes?

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

Thanks.

Answer 1

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 2

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

I am working on the same issue and got this to work with a 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 4

Try the following:

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

You can use a gridview. It will evenly distribute the buttons.

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

use this code in your activity

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