Why is my app's display different on the emulator and actual testing device?

Question

I am working on my applications UI, I am a beginner on it.

So, on my LoginActivity I have the following UI:

Alright, pretty simple and the way I intend it to be. Now, let us see how it looks on the android studio emulator:

Looks good. On my actual testing device it looks like this (portrait mode):

So my question is, why has my username and password fields gotten pushed over? How can I fix this?

EDIT: Here is my android XML for the activity shown:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="flarehubpe.xflare.flarehub.MainActivity">

    <TextView
        android:text="- Diamond axe."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView7"
        android:layout_below="@+id/textView6"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:text="- [VIP] chat rank."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView8"
        android:layout_below="@+id/textView7"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:text="- Extra coins after each match."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView8"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/textView9" />

    <TextView
        android:text="- Early access to all beta servers."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView9"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/textView10" />

    <TextView
        android:text="- All future VIP features."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView10"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/textView12" />

    <TextView
        android:text="Username:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView15"
        android:layout_alignBaseline="@+id/editText"
        android:layout_alignBottom="@+id/editText"
        android:layout_toLeftOf="@+id/editText"
        android:layout_toStartOf="@+id/editText" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText"
        android:contentDescription="Username"
        android:layout_above="@+id/backbutton"
        android:layout_toRightOf="@+id/textView8"
        android:layout_toEndOf="@+id/textView8" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/fhvip_360"
        android:id="@+id/imageView3"
        android:layout_above="@+id/backbutton"
        android:layout_toRightOf="@+id/textView12"
        android:layout_toEndOf="@+id/textView12"
        android:layout_marginLeft="21dp"
        android:layout_marginStart="21dp" />

    <TextView
        android:text="VIP lasts forever (A very long time!) and never expires."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView13"
        android:layout_above="@+id/editText"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="1050dp"
        android:layout_height="370dp"
        app:srcCompat="@drawable/shop_banner"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:id="@+id/imageView2"
        android:layout_above="@+id/imageView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="82dp" />

    <TextView
        android:text="VIPs receive:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/vipsreceive"
        android:layout_above="@+id/imageView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="37dp" />

    <TextView
        android:text="- Full chain armor."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView6"
        android:layout_below="@+id/vipsreceive"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:text="Buy - $4.99"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:onClick="buttonOnClick"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/backbutton"
        android:layout_toStartOf="@+id/backbutton" />

    <Button
        android:text="BACK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/backbutton"
        android:onClick="buttonOnClick"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/imageView3"
        android:layout_alignStart="@+id/imageView3" />

</RelativeLayout>

Answer 1

The reason is that you have not declared username and password field's attributes correctly.

You should use a LinearLayout to wrap username TextView and username EditText, another one to wrap password TextView and password EditText.