Question

I want to display 9 buttons in a table, 3 buttons on each row. All the buttons has the same dimensions. Can you tell me please how can I display this table in the middle of the screen?
Is table a solution or I’m on the wrong way?

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
android:layout_gravity = "center_horizontal"

     >  
    <TableRow>  

<ImageButton android:id="@+id/btn1"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="1"  
    android:background="@drawable/xo" 

 />  

<ImageButton android:id="@+id/btn2"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="2"  
 android:background="@drawable/xo" 

 />   
<ImageButton android:id="@+id/btn3"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="3"  
 android:background="@drawable/xo" 


 />  
 </TableRow>  
 <TableRow>  
<ImageButton android:id="@+id/btn4"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="4"  
 android:background="@drawable/xo" 
 />  
<ImageButton android:id="@+id/btn5"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="5"  
  android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn6"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="6"  
 android:background="@drawable/xo" 

 />  

</TableRow>  
 <TableRow>  
<ImageButton android:id="@+id/btn7"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="7"  
 android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn8"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="8"  
  android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn9"  
 android:layout_width="60px"   
    android:layout_height="80px" 
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="9"  
  android:background="@drawable/xo" 

 />  

</TableRow>    
</TableLayout>

Answer 1

Wrap the table in another ViewGroup.

1. Set the parent’s gravity to ‘center’.
2. Set the parent’s height and width to “fill_parent”
3. Set the table’s height and width to “wrap_content”

Now your table will be centered inside another Layout that takes up the whole screen.

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:gravity="center">

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  

     >  
    <TableRow>  

<ImageButton android:id="@+id/btn1"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="1"  
    android:background="@drawable/xo" 

 />  

<ImageButton android:id="@+id/btn2"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="2"  
 android:background="@drawable/xo" 

 />   
<ImageButton android:id="@+id/btn3"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="3"  
 android:background="@drawable/xo" 


 />  
 </TableRow>  
 <TableRow>  
<ImageButton android:id="@+id/btn4"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="4"  
 android:background="@drawable/xo" 
 />  
<ImageButton android:id="@+id/btn5"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="5"  
  android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn6"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="6"  
 android:background="@drawable/xo" 

 />  

</TableRow>  
 <TableRow>  
<ImageButton android:id="@+id/btn7"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="7"  
 android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn8"  
 android:layout_width="60px"   
    android:layout_height="80px"  
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="8"  
  android:background="@drawable/xo" 

 />  
<ImageButton android:id="@+id/btn9"  
 android:layout_width="60px"   
    android:layout_height="80px" 
    android:layout_margin="10px"  
    android:clickable="true"  
    android:tag="9"  
  android:background="@drawable/xo" 

 />  

</TableRow>    
</TableLayout>
</LinearLayout>