ImageButtons Size and Placement not working in Eclipse

Question

THE ISSUE: I cannot seem to get my ImageButtons to appear in the right place or be the right size.

THE PLATFORM : Eclipse with Android API 16

THE PROBLEM: My RelativeLayout is 600x800 and my ImageButtons are 194x64, yet when I put them in the editor they are twice as big as they should be. See link to image.

My XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/main_portal_bg" >

    <RelativeLayout
        android1:layout_width="353dp"
        android1:layout_height="758dp"
        android1:layout_marginLeft="115dp"
        android1:layout_marginTop="29dp"
        android1:background="#000000" >
    </RelativeLayout>

    <ImageButton
        android1:id="@+id/new_customer_button_selector"
        android1:layout_width="194dp"
        android1:layout_height="64dp"
        android1:layout_marginTop="89dp"
        android1:contentDescription="@string/back_button_desc"
        android1:background="@drawable/new_customer_button_selector" />

    <ImageButton
        android1:id="@+id/returning_customer_button_selector"
        android1:layout_width="194dp"
        android1:layout_height="64dp"
        android1:layout_alignParentLeft="true"
        android1:layout_below="@+id/new_customer_button_selector"
        android1:contentDescription="@string/back_button_desc"
        android1:src="@drawable/returning_customer_button_selector" />

    <ImageButton
        android1:id="@+id/redeem_coupon_button_selector"
        android1:layout_width="194dp"
        android1:layout_height="64dp"
        android1:layout_alignParentLeft="true"
        android1:layout_below="@+id/returning_customer_button_selector"
        android1:contentDescription="@string/back_button_desc"
        android1:src="@drawable/redeem_coupon_button_selector" />

    <ImageButton
        android1:id="@+id/info_button_selector"
        android1:layout_width="194dp"
        android1:layout_height="64dp"
        android1:layout_alignParentLeft="true"
        android1:layout_below="@+id/redeem_coupon_button_selector"
        android1:contentDescription="@string/back_button_desc"
        android1:src="@drawable/info_button_selector" />

</RelativeLayout>

THE RESEARCH: I have tried to use ScaleType of FitXY, setting MaxHeight and MinHeight, and using android:background instead of android:src. The only way I have been able to make them smaller is by using the Graphical Editor to resize them by holding down SHIFT and dragging the bottom-right corner. That also unfortunately forces them to be automatically aligned to the bottom of the layout and when I try to move them they snap back to their original size and all the other buttons get shuffled around the layout. Editing the XML only gets me part of the way there.

THE QUESTIONS: Every time I try to move a button in the Graphical Editor, all the other buttons get shuffled in a seemingly random pattern around the screen. Why does this happen?

I set a width of 194dp and a height of 64dp. Changing these values does nothing. Why doesm't this affect the actual width and height of my ImageButton?

When using the Graphical Editor to resize the button by holding SHIFT and dragging the corner, this doesn't change the width and height values in the XML, but just adds margins. See resulting XML below:

   <ImageButton
        android1:id="@+id/new_customer_button_selector"
        android1:layout_width="194dp"
        android1:layout_height="64dp"
        android1:layout_alignParentBottom="true"
        android1:layout_alignRight="@+id/returning_customer_button_selector"
        android1:layout_marginBottom="408dp"
        android1:layout_marginRight="86dp"
        android1:layout_marginTop="89dp"
        android1:background="@drawable/new_customer_button_selector"
        android1:contentDescription="@string/back_button_desc" />

HERE IS MY FINAL GOAL:

Please tell me how I can get there. This simple thing should be easier.

Answer 1

After reading the information supplied at developer.android.com/guide/practices/screens_support.html, I now understand the 4 different types of screen density. Thanks CaseyB for that link.

I calculated my screen density at roughly 160, after using the utility I found at http://members.ping.de/~sven/dpi.html .

My problem was that the default AVD created by the AVD Manager has the LCD density set to 240 (high).

After setting it to 160, my project rendered with the buttons the correct size.

I left all my drawables in the drawables folder, since I am developing for 1 screen resolution and density. If I decided to use another tablet, then I might make use of the other folders.

TIP: Don't depend on the Eclipse Graphical Editor for asset alignment or sizing. I'm not sure its entirely accurate. I use the old edit the XML and run the project method when trying to adjust size and spacing.