Android GUI not displaying properly in relative layout

Question

I am creating gui in relative layout and reason i am using relative layout is that, i am using a fakeview in the middle of the screen to align all the other objects properly in the center of the screen. But the output on my mobile is completely different and is completely stretch out.

My problem is that the black line in the middle is supposed to be just 1dp in height, still it appears as 50dp in height on my device. Also there is huge gap in the middle below exchange rate and above discount amt($). Such problems weren't there in the emulator. the entire screen is divided into two parts, the lower part and upper part and there is gap in middle.

I am using nexus 4 running stock rom 4.4.2 to test my application.

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

    <View android:id="@+id/fakeView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/carat"
        android:layout_marginTop="10dp"

        android:layout_below="@+id/cut3"

        android:layout_alignParentRight="true"
        android:layout_alignLeft="@+id/fakeView"
        android:layout_marginRight="20dp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/price"
        android:layout_above="@+id/caratrs"
        android:layout_alignParentRight="true"
        android:layout_alignLeft="@+id/fakeView"
        android:layout_marginRight="20dp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/list"
        android:layout_marginRight="20dp"


        android:layout_below="@+id/carat"
        android:layout_alignParentRight="true"
        android:layout_alignLeft="@+id/fakeView" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/total"
        android:layout_marginRight="20dp"

        android:layout_above="@+id/calculate"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/fakeView" />

    <Spinner
        android:drawSelectorOnTop="true"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:id="@+id/shape2"
        android:layout_toLeftOf="@+id/color"
        android:layout_alignLeft="@+id/cut3" />

    <Spinner
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:id="@+id/cut3"
        android:layout_below="@+id/shape2"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/fakeView"
        android:layout_marginLeft="20dp"
        />

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/color"
        android:layout_above="@+id/cut3"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/fakeView"
        android:layout_marginRight="20dp" />

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/clarity"
        android:layout_below="@+id/shape2"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/shape2"
        android:layout_marginRight="20dp"/>

    <EditText

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/discount"
        android:layout_marginRight="20dp"
        android:layout_below="@+id/list"
        android:layout_toRightOf="@+id/fakeView" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/converter"
        android:layout_marginRight="20dp"
        android:layout_below="@+id/discount"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/fakeView" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calculate"
        android:id="@+id/calculate"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/black"
        android:layout_below="@+id/converter"
        android:layout_marginTop="20dp"
        android:layout_alignParentLeft="true"
        android:id="@+id/view"
        android:layout_above="@+id/textView5" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:id="@+id/discamt"
        android:layout_below="@+id/view"
        android:layout_above="@+id/price"
        android:layout_alignLeft="@+id/fakeView" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"
        android:ems="10"
        android:layout_marginRight="20dp"
        android:id="@+id/caratrs"
        android:layout_above="@+id/total"
        android:layout_toRightOf="@+id/fakeView" />



    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rap Price"
        android:id="@+id/textView2"
        android:layout_above="@+id/discount"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Discount(%)"
        android:id="@+id/textView3"
        android:layout_above="@+id/converter"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Exchange Rate"
        android:id="@+id/textView4"
        android:layout_alignBottom="@+id/converter"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Discount Amt($)"
        android:id="@+id/textView5"
        android:layout_above="@+id/price"

        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="30dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="PPC($)"
        android:id="@+id/textView6"

        android:layout_above="@+id/caratrs"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ppcrs"
        android:id="@+id/textView7"
        android:layout_above="@+id/total"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="@string/Rs"
        android:id="@+id/textView8"
        android:layout_above="@+id/calculate"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Carat :"
        android:id="@+id/textView9"
        android:layout_alignBottom="@+id/carat"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

</RelativeLayout>

Answer 1

In your black view remove

 android:layout_above="@+id/textView5"

You'll end up with the following:

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/black"
    android:layout_below="@+id/converter"
    android:layout_marginTop="20dp"
    android:layout_alignParentLeft="true"
    android:id="@+id/view" />

You're already anchoring the view to converter

So you don't need the extra anchor.

Answer 2

I strongly recommend you not to use the fake view, from the screenshot, it is better to use linearlayout to hold blanks in the screen, and each blank you can use a relativelayout, in this way, this layout will look well in all devices