Emulator preview is not same to actual device

Question

I have made a simple layout that has an ImageView and two Buttons.

The layout as it shows on the preview is as follows:

Layout as shown in android studio preview

Where I run the emulator that I created for Lg3 (5.5" with 1440x2560), I get the following result (good result just like I designed)

Emulator result

However, when I actually download the apk to the real Lg3 device, the result is as follows:

Actual result

I tried using layout-normal, layout-small, layout-large however none worked.

The .xml looks as follows:

<?xml version="1.0" encoding="utf-8"?>
<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:background="@color/White"
    tools:context=".MainActivity">

<ImageView
    android:id="@+id/main_background"
    android:layout_width="230dp"
    android:layout_height="230dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="115dp"
    android:src="@drawable/main_background" />

<Button
    android:id="@+id/Sign_In"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="160dp"
    android:layout_below="@+id/main_background"
    android:layout_centerInParent="true"
    android:background="@drawable/white_buttons"
    android:fontFamily="@font/assistant"
    android:text="Sign In"
    android:textAllCaps="false"
    android:textColor="@color/Fonts"
    android:textSize="20dp" />

<Button
    android:id="@+id/Sign_Up"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_below="@+id/Sign_In"
    android:layout_centerInParent="true"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:background="@drawable/colored_buttons"
    android:fontFamily="@font/assistant"
    android:text="Sign Up"
    android:textAllCaps="false"
    android:textColor="@color/White"
    android:textSize="20dp" />

</RelativeLayout>

I was wondering if there is something im doing wrong that creates unequal result between the emulator and the real device.

Thank you very much

Answer 1

As CommonsWare mentioned - it may be because of different screen density.

My recommendation to you is to use ConstraintLayout to develop one layout for all screen sizes.

From the documentation:

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

Here is an example using ConstraintLayout without using fixed-sized values on your views:

<androidx.constraintlayout.widget.ConstraintLayout 
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"
  android:background="@null"
  tools:context=".MainActivity">


<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="@+id/button2"
    app:layout_constraintStart_toStartOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintWidth_percent="0.5"
    app:layout_constraintHeight_percent="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:srcCompat="@tools:sample/avatars[14]" />
</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

For more information about ConstraintLayout you can also guidelines and Chains to support different screen sizes.