TextView's and EdidText's not align as expected

Question

So im trying to make a simple sign up activity but my Views are aligned not as expected.

XML:

<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.mylifeinformationsharedsocial.SignUpActivity" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/username_id"
    android:text="@string/username_text"
    android:textSize="20sp"
    />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/username_edit_text_id"
    android:hint="@string/username_hint_texts"
    android:layout_toRightOf="@id/username_id"
    android:layout_toEndOf="@id/username_id"
    />

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/password_id"
    android:text="@string/password_text"
    android:textSize="20sp"
    android:layout_below="@id/username_edit_text_id"
    />

<EditText
    android:id="@+id/password_edit_text_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:hint="@string/passworde_hint_texts"
    android:layout_toRightOf="@id/password_id"
    android:layout_toEndOf="@id/password_id"
    android:layout_below="@id/username_edit_text_id"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/email_id"
    android:text="@string/email_text"
    android:textSize="20sp"
    android:layout_below="@id/password_id"
    />

<EditText
    android:id="@+id/email_edit_text_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textEmailAddress"
    android:hint="@string/email_hint_text"
    android:layout_toRightOf="@id/email_id"
    android:layout_toEndOf="@id/email_id"
    android:layout_below="@id/password_edit_text_id"
    />

<Button
    android:id="@+id/sign_up_button_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sign_up_button_text"
    android:layout_below="@id/email_id"
    />

Graphical Layout:

I cant seem to find whats wrong with it. Any help will be very appreciated. The problem is with the Email downwards as seen in the pic. Its pretty strait forward but apparently not.

Answer 1

Your password_text is declared as being below username_edit_text_id, whereas it wants to be below username_id.

Android takes all the specs that you give it and it does its best to do what you asked but if the specs are inconsistent or impossible to satisfy then it'll come out wrong.

Answer 2

Maybe you could try it this way:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/username_id"
    android:text="@string/username_text"
    android:textSize="20sp"
    />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/username_edit_text_id"
    android:hint="@string/username_hint_texts"
    android:layout_toRightOf="@id/username_id"
    android:layout_toEndOf="@id/username_id"
    />

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/password_id"
    android:text="@string/password_text"
    android:textSize="20sp"
    android:layout_below="@id/username_edit_text_id"
    />

<EditText
    android:id="@+id/password_edit_text_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:hint="@string/passworde_hint_texts"
    android:alignRight = "@id/username_edit_text_id"
    android:layout_below="@id/username_edit_text_id"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/email_id"
    android:text="@string/email_text"
    android:textSize="20sp"
    android:layout_below="@id/password_id"
    />

<EditText
    android:id="@+id/email_edit_text_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textEmailAddress"
    android:hint="@string/email_hint_text"
    android:alignRight = "@id/password_edit_text_id"
    android:layout_below="@id/password_edit_text_id"
    />

<Button
    android:id="@+id/sign_up_button_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sign_up_button_text"
    android:layout_below="@id/email_id"
    />

Instead of using toRightOf I used alignRight so all EditText would be right aligned.

This will work well for your case (if you have only these rows), otherwise you should align all EditText to the right most one.