layout looks good in android layout editor - completely off on emulated devices

Question

For example: I'll do a layout (using the editor) for the galaxy tab. When I run galaxy tab emulator my circles will be strewn all around the its "screen". If I do a layout for a smaller phone and then run the phone's emulator, I get the same results - my circles placed in other places than I defined. It seems like the editor sets my circles like I want - relative to imageview they are placed on top of. However, the devices seem to place the circles relative to the size of the emulated device's screen.

I've tried to use viola_desmond_pic.getWidth() and viola_desmond_pic.getHeight() so that I can lay out the circles programatically but they just return the size of the screen rather than the view. I understand dp and planning for different densities but, the layout editor/emulator discrepancy is crazy.

Does anyone else have this discrepancy problem? I could very well be overlooking something.
How could I get can accurate size of the Imageview, "viola_desmond_pic" and do my layout from particular edges with percentages if I decide to skip XML?

Here's the XML from my "layout-xlarge" folder. I'm targeting Android 2.1

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout04"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<ImageView
    android:id="@+id/viola_desmond_pic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:scaleType="fitCenter"
    android:src="@drawable/viola_desmond" />

<ImageView
    android:id="@+id/keyhole"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="160dp"
    android:layout_marginTop="95dp"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:scaleType="fitCenter"
    android:src="@drawable/circle3" />

<ImageView
    android:id="@+id/gun"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/keyhole"
    android:layout_alignRight="@+id/cat"
    android:layout_marginRight="42dp"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:paddingBottom="35dp"
    android:paddingLeft="60dp"
    android:paddingRight="50dp"
    android:scaleType="fitCenter"
    android:src="@drawable/circle3" />

<ImageView
    android:id="@+id/popcorn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="61dp"
    android:layout_marginLeft="83dp"
    android:layout_toRightOf="@+id/keyhole"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:paddingBottom="10dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="20dp"
    android:scaleType="fitCenter"
    android:src="@drawable/circle3" />

<ImageView
    android:id="@+id/pen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="24dp"
    android:layout_marginTop="46dp"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:paddingBottom="140dp"
    android:paddingTop="140dp"
    android:src="@drawable/circle3" />


</RelativeLayout>

score 2 · Answer 1 · answered Mar 30 '12 at 11:18

I have had similar issues where the emulator does not use the correct resources - ie it picks medium density and scales up which can cause they discrepancies. Its worth dropping in a textview with some descriptive text into each layout and testing for this in the first case.

In the preDraw method of the ViewTreeObserver, you could try using iv.getMeasuredHeight and getMeasuredWidth. I try to steer clear of doing this though and play with the layouts. Im quite sure you cant specify percentages in Java for layout, however you could work out the desired height and width from the available screen size and size your imageviews accordingly using RelativeLayout.LayoutParams and assigning the params to your imageview. This way you have very manual control over size.

Hope this helps.

Jason

layout looks good in android layout editor - completely off on emulated devices

1 Answers1