HorizontalScrollView pushes my widgets to the left side

HorizontalScrollView pushes my widgets to the left side

I am trying to make my layout to be horizontally scrollable, but when I do
that, it pushes my widgets to the left side.
This is my original XML where the layout is exactly what I want:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/btnBack"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Main Screen" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btnBack"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:text="Coordinate Calculator"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/num1"
android:layout_below="@+id/num1"
android:imeOptions="flagNoExtractUi"
android:ems="5"
android:hint=" y"
android:inputType="numberSigned|numberDecimal"
android:maxLength="4" />
<EditText
android:id="@+id/num3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/num2"
android:layout_below="@+id/num2"
android:ems="5"
android:imeOptions="flagNoExtractUi"
android:hint=" r"
android:inputType="numberSigned|numberDecimal"
android:maxLength="4" />
<EditText android:imeOptions="flagNoExtractUi"
android:id="@+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"
android:layout_marginTop="19dp"
android:ems="5"
android:hint=" x"
android:inputType="numberSigned|numberDecimal"
android:maxLength="4" />
<Button
android:id="@+id/btnCalculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/num2"
android:layout_alignRight="@+id/textView1"
android:layout_alignTop="@+id/num1"
android:text="Calculate" />
<Button
android:id="@+id/btnClear"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btnCalculate"
android:layout_alignRight="@+id/btnCalculate"
android:layout_below="@+id/btnCalculate"
android:text="Clear All" />
<TextView
android:id="@+id/display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/btnClear"
android:layout_marginLeft="20dp"
android:layout_marginTop="27dp"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</ScrollView>
This is the layout for the XML above:

This is the XML for the horizontally scrollable layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- all the same widgets -->
</RelativeLayout>
</HorizontalScrollView>
</ScrollView>
Now here is the layout for this XML:

This is usually how I modify my XML to make it horizontally scrollable,
but this time it's not working.
How can I make this horizontally scrollable without changing the layout at
all?