Layout displayed differently on different devices at the same resolution screen

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>

It's about the density of the pixels.But you should have no problems since you use XML for the UI and you give the widths and heights in DP (density pixel). — Vlad, May 30 '15 at 14:01
Layout is displayed in different way only on S4. On other devices with the same screen resolution everythink is good. So where is problem here? — Pietras, May 30 '15 at 14:41
Have you solve this issue? I have the same problem: http://new.izigo.pt/content/images/IMG_3209.JPG — Patrick, Jan 18 '18 at 18:30
@Patrick, what is the [screen density](https://stackoverflow.com/q/3166501/3290339) reported by _Android_ for each of the devices? — Onik, Jan 19 '18 at 20:45
@Onik Hi thanks! Can I get this information directly from the device interface? Lenovo (https://www.gsmarena.com/lenovo_tab3_7-7951.php) website says: "600 x 1024 pixels, 16:9 ratio (~170 ppi density)" and Huawei (https://www.gsmarena.com/huawei_mediapad_t3_7_0-8635.php) says: "600 x 1024 pixels, 16:9 ratio (~170 ppi density)". I only find the difference: 7.0 inches, 137.9 cm2 (~72.2% screen-to-body ratio) and 7.0 inches, 137.9 cm2 (~74.3% screen-to-body ratio) — Patrick, Jan 22 '18 at 18:08
@Patrick, the key point here is to look how the system treats the displays. The info on the Internet is just a spec... — Onik, Jan 22 '18 at 18:46
@Onik I get 213 (pixels/inch) in the Huawei (scale 1.3) and 160 in the Lenovo (scale (1.0) — Patrick, Jan 23 '18 at 10:24

score 5 · Accepted Answer · answered Jun 01 '15 at 16:12

5

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

answered Jun 01 '15 at 16:12

Lamorak

10,957
9
43
57

Hm, is true. So how can i fix it? How to create separate layouts? – Pietras Jun 01 '15 at 16:25
1

Instead of trying to position the views absolutely so it *seems* they have a background of their own, make one background for the whole screen and backgrounds for each view – Lamorak Jun 01 '15 at 17:12
Maybe is a way to do two xml files for device with navigation bar and without? – Pietras Jun 01 '15 at 17:30
It is but you will not end with just two xmls. Basically you would need a xml per device to be 100% sure it will look properly – Lamorak Jun 01 '15 at 19:49
I have the same problem and I don't have the navigation keys visible: http://new.izigo.pt/content/images/IMG_3209.JPG any ideia how can I solve this? – Patrick Jan 18 '18 at 18:30

score 0 · Answer 2 · answered Jan 24 '18 at 19:35

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" />

Hi thanks! In my case, it's a webView with a loadUrl, so I don't have access to the image, it's in the HTML. — Patrick, Feb 05 '18 at 16:21

Layout displayed differently on different devices at the same resolution screen

2 Answers2

Linked