Question

I am a total noob so I might have gotten the basics wrong but this is just confusing the heck out of me.

I have one image button and one background image here
(note: bikini girl so might be NSFW – I figured if i was going to be seeing this screen for a long time i might as well have something interesting there ;D )

http://imageshack.us/photo/my-images/6/finaldi.jpg/

As you can see at different screen sizes the background image scales fine, but my image button at first has a weird border around it and then it just starts shrinking.

I have made the same image button in 36×36,48×48,72×72 and 96×96 and put them in the
drawable-ldpi,drawable-mdpi,drawable-hdpi directories without any change 🙁

How can I get that button to be the same on all screens?
I was reading on DIP but where do i declare that?

Thanks!

EDIT, The XML code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:background="@drawable/background_ass">
    <TableLayout android:id="@+id/tableLayout1" android:layout_height="wrap_content" android:layout_width="fill_parent">
        <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content">
            <ImageButton android:src="@drawable/level1" 
                android:id="@+id/imageButton1" 
                android:onClick="button_clicked1"
                android:background="#00000000"  android:layout_width="48dip" android:layout_height="48dip">
            </ImageButton>
        </TableRow>
        <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content">
            <TextView android:text="TextView" android:id="@+id/textView1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"></TextView>
        </TableRow>
        <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content">
        </TableRow>
        <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content"></TableRow>
    </TableLayout>

</LinearLayout>

Answer 1

Afaik the ImageButton has a minimal size, that’s the visible border. You can get rid of it by defining a transparent background and zero padding:

<ImageButton ... background="#00000000" padding="0px"/>

update after having the code:
The problem here is that the width and height of the ImageButton are fixed and the image is not told to scale.

The SDK docs give some explanation about handling multiple screen sizes/resolutions, but it’s not a trivial issue!
My recommendation would be, depending on your needs:

• If the relative size (dip) should be exactly the same on all devices, add scaleType=”fitXY” to the declaration of the ImageButton
• If it’s ok to have the size slighly change, set layout_width and layout_height to “wrap_content”.