Question

I built a simple, once screen android app – it has edittext boxes for username, password etc. This is how it looks in the AVD/Eclipse:

Yet when I deploy it to my HTC Evo 4G, this is how it looks:

In case it matters, Project Build Target is Android 4.0 in Eclipse, but my HTC Evo 4g is running Android 2.3.3. Is that causing this drastic difference? Shouldn’t the layout be backward compatible?

I just realized this:
When I rotate my device to landscape view, I only see the email edittext, but when the device is in portrait, I only see the password edittext (as in the pic above).

Here’s my main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >



    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="40dp"
        android:layout_weight="0.34"
        android:scaleType="center"
        android:src="@drawable/shift" />


    <TextView
        android:id="@+id/txtLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"
        android:text="@string/login"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:text="@string/email"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <EditText
            android:id="@+id/txtEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="50dp"
            android:inputType="textEmailAddress" >            
        </EditText>        

        <TextView
            android:id="@+id/txtPass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="120dp"
            android:text="@string/password"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:hint = "Email address" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="150dp"
            android:inputType="textPassword"            
            android:hint="Password"/>


        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="200dp"
            android:text="Login" />

        <requestFocus/>

    </FrameLayout>

</LinearLayout>

Answer 1

Upon further research and tinkering around with the UI XML, I realized the problem was that I had most of my controls in a framelayout.

Now, I’m not sure what exactly a framelayout does but, it seems to stack all controls over each other (and ignores margins). The reason I could only see the Password edittext is because it was placed at the top of the stack of the elements.