Question

When using Eclipse’s layout editor to design Android layouts, editing one of the element’s ID or moving it will cause all the others to move. Also, wrapping the whole element into another container will cause this problem, too.

This is what happens. After this, moving the elements to the right places is absolutely impossible.

How to fix the problem?

The XML file before editing:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <EditText
        android:id="@+id/securityQuestion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="31dp"
        android:ems="10"
        android:hint="@string/turvak" >

        <requestFocus />

    </EditText>

    <EditText
        android:id="@+id/securityQuestionAnswer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/securityQuestion"
        android:layout_below="@+id/securityQuestion"
        android:layout_marginTop="24dp"
        android:ems="10"
        android:hint="@string/vastaus"
        android:inputType="textPassword" />

    <EditText
        android:id="@+id/password1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/securityQuestion"
        android:layout_below="@+id/securityQuestionAnswer"
        android:layout_marginTop="57dp"
        android:ems="10"
        android:hint="@string/salis"
        android:inputType="textPassword" />

    <EditText
        android:id="@+id/password2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/password1"
        android:layout_alignRight="@+id/password1"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="@string/salasanauudelleen"
        android:inputType="textPassword" >
    </EditText>

    <Button
        android:id="@+id/saveButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/password2"
        android:layout_below="@+id/password2"
        android:layout_marginTop="30dp"
        android:text="@string/tallenna" />

</RelativeLayout>

And after adding a container, a ScrollView:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ScrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <EditText
            android:id="@+id/securityQuestion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="31dp"
            android:ems="10"
            android:hint="@string/turvak" >

            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/securityQuestionAnswer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/securityQuestion"
            android:layout_below="@+id/securityQuestion"
            android:layout_marginTop="24dp"
            android:ems="10"
            android:hint="@string/vastaus"
            android:inputType="textPassword" />

        <EditText
            android:id="@+id/password1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/securityQuestion"
            android:layout_below="@+id/securityQuestionAnswer"
            android:layout_marginTop="57dp"
            android:ems="10"
            android:hint="@string/salis"
            android:inputType="textPassword" />

        <EditText
            android:id="@+id/password2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/password1"
            android:layout_alignRight="@+id/password1"
            android:layout_centerVertical="true"
            android:ems="10"
            android:hint="@string/salasanauudelleen"
            android:inputType="textPassword" >
        </EditText>

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/password2"
            android:layout_below="@+id/password2"
            android:layout_marginTop="30dp"
            android:text="@string/tallenna" />
    </RelativeLayout>

</ScrollView>

Answer 1

I’m guessing you’re using a RelativeLayout. In this layout, views define their location relative to other views. Due to this, changing the position/id of one view, will relocate all views which depend on that view, and all views which depend on views which depend on the edited view and so on. Additionally, when you wrap existing views in another layout container, other views can no longer reference them directly, causing the same behavior.

You can fix (well, avoid really) this by:

1. Going to the XML and Find/replacing the ID you want to change. This will change all references to it, and make sure the views don’t try to position themselves to a now non-existent ID
2. Use a layout like a LinearLayout, in which the View position does not depends on other views (however, view size may).

Other than that, there is no workaround as this is expected behavior.