Layout displayed differently on different devices

Question

Problem: layout displayed differently on different devices at the same resolution screen. I tested it on Samsung Galaxy S4 (1080x1920) and on LG G2 (1080x1920). It the same resolution, so why layout is displayed differently on each device ?

I have all in layout folder and not have another layouts for other resolutions.

Here are screens:

• Samsung Galaxy S4

http://www.image-share.com/ijpg-2963-272.html

• LG G2

http://www.image-share.com/ijpg-2963-271.html

EDIT #1

<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:id="@+id/layoutMain"
tools:mContext="com.test.app.flock.mActivity">

<ImageView
    android:id="@+id/imageViewImageBackground"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone" />

<View
    android:id="@+id/viewBackground"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background01" />

<View
    android:id="@+id/viewFingerprint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/fingerprint01"
    android:visibility="gone" />

<Button
    android:id="@+id/buttonScanning"
    android:layout_width="162dp"
    android:layout_height="130dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="41dp"
    android:background="@android:color/transparent" />

<ImageView
    android:id="@+id/imageViewScanner"
    android:layout_width="162dp"
    android:layout_height="130dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="41dp"
    android:src="@drawable/line01"

    android:visibility="gone" />

<TextView
    android:id="@+id/textViewResult"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="180dp"

    android:text="SCANNING"
    android:textSize="30sp"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:gravity="center"

    android:visibility="gone" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="112dp"
    android:orientation="vertical">

    <DigitalClock
        android:id="@+id/digitalClock"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="7"

        android:textSize="30sp"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewDate"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="10"

        android:text="10 Grudzien 2015"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:textStyle="bold" />

</LinearLayout>

Answer 1

The problem is not in layout or density, but in the different heights available, due to the presence of the button bar. As the image set as background of the View will expand, distorting itself, I suggest you to put it as src of the ImageView and set the scaleType to fitCenter, this way the image will fit the screen maintaining its proportions:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:src="@drawable/background01" />

Answer 2

The phones do have the same resolution, however, the window height is different because LG G2 has navigation keys on the screen.