Controls not rendering properly in actual android device

I am very new to android app development. I am designing the layout of an Activity of an Android project in android studio. I am noticing a strange behavior and I am not able to find a solution. In the design view I am seeing the following view being generated for the following code.

View generated:

Code:

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    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=".RegistrationActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:orientation="vertical">

        <LinearLayout
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:src="@drawable/test" />

            <LinearLayout
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="20dp"
                android:orientation="vertical">

                <Button
                    android:id="@+id/button"
                    android:layout_marginTop="20dp"
                    style="?android:attr/buttonStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/GalleryImagePicker"
                    />
                <TextView
                    android:layout_marginTop="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:id="@+id/ORTextView"
                    android:text="OR"
                    android:layout_marginLeft="10dp"

                    />
                <Button
                    android:layout_marginTop="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    style="?android:attr/buttonStyleSmall"
                    android:text="@string/FacebookImagePicker"
                    android:id="@+id/button2"
                    android:layout_gravity="right"/>
            </LinearLayout>


        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

As you can see in the view the device I have selected is Nexus 5, which has a 1080p display. The view generated is also exactly the same in Genymotion emulator running Nexus 5 android 5.1

Now if I deploy the same application to Sony Xperia Z Ultra device (running android 5.0) which also has a 1080p display the view I get is:

What is the reason behind these two different behaviors?