Relative Layout Does Not Align 3 Images Correctly - uiimageview

Question

I have a RelativeLayout which i'd like to use to create two side by side ImageViews (h1 and h2) with another image centered on top (ui3)
For some reason the images do not seem to align correctly when using the following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".Home" >
<EditText
android:id="#+id/et_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="78dp"
android:layout_marginTop="195dp"
android:ems="10" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/et_pw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_marginLeft="45dp"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="#+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_alignTop="#+id/editText2"
android:layout_marginLeft="21dp"
android:layout_marginTop="17dp"
android:text="Button" />
<Button
android:id="#+id/btn_reg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:text="Button" />
<ImageView
android:id="#+id/ui3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/ui2" />
<ImageView
android:id="#+id/h2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1.0"
android:layout_alignRight="#+id/header1"
android:src="#drawable/h2" />
<ImageView
android:id="#+id/h1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/h2"
android:layout_alignParentLeft="true"
android:layout_weight="1.0"
android:layout_alignParentTop="true"
android:src="#drawable/h1" />
</RelativeLayout>
Expected Result:
Result:
To be perfectly clear: I simply need to create what appears to be one solid image out of the 3 individual images:
RESOURCES:
http://i.stack.imgur.com/pYZIt.jpg
http://i.stack.imgur.com/KzaYd.png
http://i.stack.imgur.com/hB9KS.png

Answer 1

Problem in your code - Circular reference between the views in layout.
Problem 1
This imageview is taking the complete screen size.
<ImageView
android:id="#+id/ui3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
/>
Problem 2
This image view is creating circular reference.
<ImageView
android:id="#+id/h1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/h2"
android:layout_alignParentLeft="true"
android:layout_weight="1.0"
android:layout_alignParentTop="true"
/>