android - layout - Resize ImageButtons?

Question

I wrote a layout. On the layout there are 5 buttons.

http://imageshack.us/photo/my-images/607/layout.gif/

Here is my Tablelayout:

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="0,1"  android:stretchColumns="*">


<TableRow
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
        android:textSize="14dp" 
        android:text="Hello"  
        android:layout_span="5"
        android:paddingTop="27dp"
        android:paddingBottom="25dp"
        android:textColor="#ffffff" 
        android:gravity="center" />
</TableRow> 

<TableRow>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

    <FrameLayout
        android:layout_weight="0.2">
        <ImageButton
            android:id="@+id/ImageButton1"
            android:background="@drawable/ImageButton1"
            android:layout_width="97dp"
            android:layout_height="90dp" 
            android:layout_gravity="center"
            android:scaleType="center"
             />
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
       <ImageButton
            android:id="@+id/ImageButton2"
            android:layout_width="97dp"
            android:layout_height="90dp"
            android:background="@drawable/ImageButton2"
            android:layout_gravity="center"
            android:scaleType="center" />           
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
       <ImageButton
            android:id="@+id/ImageButton3"
            android:layout_width="97dp"
            android:layout_height="90dp"
            android:background="@drawable/ImageButton3"
            android:layout_gravity="center"
            android:scaleType="center" />
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

</TableRow>

<TableRow>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

    <TextView
            android:textSize="12dp" 
            android:text="Text1"  
            android:padding="3dp"
            android:textColor="#fff" 
            android:gravity="center" />   

    <TextView
            android:textSize="12dp" 
            android:text="Text2"  
            android:padding="3dp"
            android:textColor="#fff" 
            android:gravity="center" />  

    <TextView
            android:textSize="12dp" 
            android:text="Text3"  
            android:padding="3dp"
            android:textColor="#fff" 
            android:gravity="center" />  

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

</TableRow>

<View
    android:layout_height="30dp" />

<TableRow>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

    <FrameLayout
        android:layout_weight="0.2">

        <ImageButton
            android:id="@+id/ImageButton4"
            android:layout_width="97dp"
            android:layout_height="90dp"
            android:background="@drawable/ImageButton4"
            android:scaleType="center"
            android:layout_gravity="center" />
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
        <ImageButton
            android:id="@+id/ImageButton5"
            android:layout_width="97dp"
            android:layout_height="90dp"
            android:background="@drawable/ImageButton5
            android:scaleType="center"
            android:layout_gravity="center" />        
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>

    <FrameLayout
        android:layout_weight="0.2">
    </FrameLayout>   

</TableRow>

</TableLayout>

Everything works good on my big smartphone. But when i look it with my small smartphone there is not enough space anymore on the bottom Screen. How can i change it so, that the Table layout scales everything.

I gave this here by the Image Buttons:

android:layout_width="97dp"
android:layout_height="90dp" 

That's the reason, why there is not more enough space in the bottom of the small smartphone. The Table layout should scale the Image Buttons. The Image Button has not a square form. Its like rectangle.

The Table layout should be horizontal 100% and vertical 100%.

Answer 1

I think the problem is due to scaling , it is not scaling down according to screen size . You need to make new drawable with proper densities for all three categories hdpi , mdpi and ldpi .

For calculating what density you require you can use this tool http://labs.skinkers.com/content/android_dp_px_calculator/

Scaling depends on two things screen size as well as screen density .

For More info you can look into the developer site you will find how android roughly scales the images