Android Normal Layout is displayed differently on devices

Question

I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.

For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:

Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png

Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png

After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.

The xml code of this layout:

<?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"
    android:background="@drawable/mybackground"
    tools:context=".Start">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerName"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#00FFFFFF"
        android:padding="5dp"
        android:scrollbars="none"
        android:layout_below="@id/name_add"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="160dp"
        android:layout_marginStart="200dp"
        />

    <EditText
        android:id="@+id/name_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="100dp"
        android:layout_marginTop="200dp"
        android:width="180dp"
        android:ems="10"
        android:hint="Name"
        android:importantForAutofill="no"
        android:inputType="text"
        android:singleLine="true"
        android:textColor="#424242"
        android:textColorHint="#424242"
        app:backgroundTint="#585858" />

    <ImageButton
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/name_add"
        android:layout_marginBottom="11dp"
        android:layout_toEndOf="@id/name_add"
        android:layout_marginStart="9dp"
        android:src="@drawable/ic_plus"
        android:background="@android:color/transparent"
        android:contentDescription="add"/>

    <Button
        android:id="@+id/goToSelection"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="520dp"
        android:background="@drawable/play_btn"
        android:fontFamily="sans-serif"
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:text="@string/btn_play"
        android:textAllCaps="false"
        android:textSize="20sp"
        />

    <Button
        android:id="@+id/languagegbr"
        android:layout_width="45dp"
        android:layout_height="25dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="15dp"
        android:layout_marginBottom="15dp"
        android:background="@drawable/gbr"
        />

    <Button
        android:id="@+id/languagedr"
        android:layout_width="45dp"
        android:layout_height="25dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="15dp"
        android:layout_marginBottom="55dp"
        android:background="@drawable/germanyr"
        android:visibility="gone"/>

</RelativeLayout>

All of the images will later be replaced by vector graphics.

My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?

Answer 1

I've struggled with this kind of issues for a long time.

This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.

The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.

In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.

<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"
    tools:context=".login.YourActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>   

</androidx.constraintlayout.widget.ConstraintLayout>

Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.