Question

I have a screen with 4 ImageButton in a 2×2 Grid (using TableLayout).

I need to give support to all the different screen sizes. So I created the 4 layout folders (small, medium, large and extralarge).

It worked ok for the position of the ImageButton. But on large and extralarge screens the ImageButton’s size are too small.

I tried to solve this problem using the 4 folders for diferents density (drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi) using the x0.75, x1, x1.5 and x2 relation between mdpi and the others folders.

But I thinks that is not working or is not the right way to resolve this.

It is that the right way to resolved?

I worry about small screen but with Hight Density. Or Medium screen with low density. In those cases maybe is not working, right?

Other idea that I have, is to force the ImageButton’s size (measure in dips) on every layout of every sizes folder. It that a better way to resolved?

I really lost with this. I want to apply the best/correct solution.

Can somebody help me?

Thanks and sorry for my poor english

Update:

This is the layout:

<?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:orientation="vertical"
    android:gravity="center_horizontal">

    <TableRow
        android:gravity="center"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_marginTop="60dip"  >

        <ImageButton
            android:id="@+id/newCard_button"
            android:layout_margin="10dip"    
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"             
            android:background="@drawable/selector_new_card_button"/>

        <ImageButton
            android:id="@+id/showLastTicket_button"
            android:layout_margin="10dip"      
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"          
            android:background="@drawable/selector_show_last_ticket_button"/>

    </TableRow>

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

         <ImageButton
            android:id="@+id/cancelLastTransaction_button"
            android:layout_margin="10dip"      
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"           
            android:background="@drawable/selector_anulla_button"/>

        <ImageButton
            android:id="@+id/searchCustomer_button"
            android:layout_margin="10dip"      
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:background="@drawable/selector_search_customer_button"/>

    </TableRow>
</TableLayout>

Answer 1

You could try to adjust ImageButton’s width and height values in your layout by giving exact values like 50dip instead of wrap content. dip value is going to appear in different sizes in different screens as dip means Density Independent Pixels.