LinearLayout not aligned as i wish

Question

We'll start with a picture:

I want the TextView and the EditText of the Email address to be below the logo but somehow it's on top of it.

My layout:

<ScrollView 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.LoginActivity" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:background="@color/white_1" >

    <!--  Header Starts-->
    <LinearLayout 
        android:id="@+id/linear_layout_header_id"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header_gradient"
        android:paddingTop="5dip"
        android:paddingBottom="5dip"
        android:orientation="vertical" >

            <!-- Logo Start-->
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/hd_logo"
                android:layout_marginLeft="10dip"
                android:layout_marginStart="10dip"
                android:contentDescription="@string/imgae_view_logo_content_description"
                />

    </LinearLayout>         
            <!-- Logo Ends -->
    <!--  Header Ends -->

    <!-- Footer Start -->
    <LinearLayout
        android:id="@+id/linear_layout_footer_id"
        android:layout_width="fill_parent"
        android:layout_height="90dip"
        android:orientation="vertical"
        android:background="@drawable/header_gradient"
        android:layout_alignParentBottom="true" >
    </LinearLayout>   
    <!-- Footer Ends -->

    <!-- Login Form -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dip" >

      <!--  Email Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="@color/black_1"
          android:text="@string/login_page_email_text_view_text"
          />

      <EditText
          android:id="@+id/login_page_email_edit_text_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:layout_marginBottom="20dip"
          android:singleLine="true"
          android:hint="@string/login_page_email_edit_text_hint"
          android:inputType="textEmailAddress"
          />

      <!--  Password Label -->
      <TextView 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:textColor="#372c24"
          android:text="@string/login_page_password_text_vuew_text"
          />

      <EditText
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="5dip"
          android:singleLine="true"
          android:inputType="textPassword"
          android:hint="@string/login_page_password_edit_text_hint"
            />
      <!-- Login button -->
      <Button 
          android:id="@+id/login_page_login_button_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="10dip"
          android:text="@string/login_page_login_button_text"
          />

      <!-- Link to Registration Screen -->
      <TextView 
          android:id="@+id/login_page_go_to_sign_up_page_text_view_id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="40dip"
          android:layout_marginBottom="20sp"
          android:text="@string/login_page_go_to_sign_up_page_text_view_text"
          android:gravity="center"
          android:textSize="20sp"
          android:textColor="#0b84aa"
          />

    </LinearLayout>
    <!-- Login Form Ends -->

   </RelativeLayout>

</ScrollView>

What am i doing wrong? because all the LinearLayout orientation is set to vertical so how come some View are aligned on top of others?

Answer 1

Your father container is a RelativeLayout, so the children has to be positioned "in a relative way" between each other. For example: linear_layout_footer_id should be placed under linear_layout_header_id using

android:layout_below="@id/linear_layout_header_id"

Other solution: replace your RelativeLayout with another LinearLayout with vertical orientation