CODEWITHSUNDEEP
androidxmlandroid-layoutimagebutton
Mark Comix
Mark Comix

Reputation: 1898

ImageButton size on different screen layouts

I have a screen with 4 ImageButton in a 2x2 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>

Upvotes: 0

Views: 838

Answers (2)

Serdar Samancıoğlu
Serdar Samancıoğlu

Reputation: 740

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.

Upvotes: 0

Kevin Coppock
Kevin Coppock

Reputation: 134664

Okay, so what I would suggest for this is to use the relatively new qualifiers sw600dp and sw720dp (shortest width: 600dp or 720dp) to define larger sizes for those screens -- those are basically 7" and 10" tablets. You could either define a specific dimen variable and have a larger value in a values-sw600dp resource folder, or actually create a different layout altogether in a layout-sw600dp resource folder, depending on how much needs to change.

Upvotes: 1

Related Questions