Android: Problem fitting a table of ImageButtons within the screen

Question

I am trying to create a table of 7 rows and 7 columns of ImageButtons - buttons with image resource added from the drawable folder. The problem is I can only see the first button and the rest go off screen. How do I scale the image or the buttons so all 49 can be viewed on screen? The following is the main.xml file. Any help would be great!! Thank you!

<?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">
<TableRow>
    <ImageButton  
    android:id="@+id/r0c0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/frog" 
    android:scaleType="centerInside"
    />
    <ImageButton  
    android:id="@+id/r0c1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/frog"    
    android:scaleType="centerInside"
    />
    <!--  5 more ImageButtons go here -->
</TableRow>
<TableRow>
    <ImageButton  
    android:id="@+id/r1c0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/frog" 
    android:scaleType="centerInside"
    />
    <ImageButton  
    android:id="@+id/r1c1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/frog"    
    android:scaleType="centerInside"
    />
    <!--  5 more ImageButtons go here -->
</TableRow>
<!-- 5 more TableRows go here -->

 </TableLayout>

Answer 1

First, you do not need the android:layout_width="wrap_content" and android:layout_height="wrap_content" values for the children of TableRow .

Also, try fitCenter instead of centerInside for your scaleType .