Android Studio Constraint Layout Preview is different than phone screen

Question

I'm trying to program an activity in android studio that will be, at least, similar in any device. In order to achieve this, I'm already using:

• Constraint Layout;
• Text size as sp and other sizes as dp;
• Same resolution (1920x1080) in my android preview and my physical device.

But, I'm getting a different screen behavior in each screen, as you can see by the pics.

Major differences are:

• Text size seems different even using "sp" unit to define it;
• Phone have a line break but preview not;
• Preview has a much larger blank space when compared to the phone.

What is happening? How could I prevent this behavior and design similar layouts for different phone screens?

xml file

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary" />

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

        <LinearLayout
            android:background="@color/colorWhite"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="45dp"
            android:layout_marginBottom="45dp">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingLeft="30dp"
                    android:paddingRight="30dp">

                    <TextView
                        android:id="@+id/templatetv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TextView1"
                        android:textColor="@color/colorPrimary"
                        android:textStyle="bold"
                        android:textSize="25sp"
                        android:layout_marginTop="30dp" />

                    <TextView
                        android:id="@+id/textview1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Name: John Sample"
                        android:textSize="18sp"
                        android:layout_marginTop="10dp" />

                    <TextView
                        android:id="@+id/textview2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Document number: XXX.XXX.XXX-XX"
                        android:textSize="18sp"
                        android:layout_marginTop="10dp" />

                    <TextView
                        android:id="@+id/textview3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Father name: John Sample"
                        android:textSize="18sp"
                        android:layout_marginTop="10dp" />

                    <TextView
                        android:id="@+id/textview4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Mother name: Eva Sample"
                        android:textSize="18sp"
                        android:layout_marginTop="10dp" />

                    <TextView
                        android:id="@+id/textview5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Birthdate: 01/01/1901"
                        android:textSize="18sp"
                        android:layout_marginTop="10dp" />

                </LinearLayout>
            </ScrollView>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Android Studio Screen Preview Phone Screen

Answer 1

Try to remove this part, I think that can be the margin:

    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp" >

Answer 2

You need to define different layouts for different screens. Also, if you follow material design guidelines most of the problems will not arise. checkout the google material design documentation .