Controls not rendering properly in actual android device

Question

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://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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?

Answer 1

The reason for the seemingly odd behaviour in your question is because the width of Nexus 5 and Xperia Z Ultra are different in dps (density independent pixels)

You need to prepare different layout files based on size qualifiers to give the same look across multiple devices. Take a look here. If you use smallest width(sw) as a size qualifier, Nexus 5 will use layout from sw320dp and Xperia Z ultra will use layout from sw480dp proving the fact that they have different widths in dps.

Answer 2

You should use the relative positions for the layout parameters, do not use hard coded (fixed) values. Relative positions will be rendered accordingly on different screen size and density devices. You can refer this link