Android Studio - Layout Elements differ in size on the physical device, compared to the preview and emulator

Question

I'm relativly new to android. While designing my layout I stumbled over an problem I can't solve and which doesn't seem to be answered anywhere. Or maybe I don't really know what I have to search for. Anyways the problem lies in the way the layout is previewed and shown in the emulator in contrast to the actual device. As seen in the pictures below the layout elements and the spacing are off. Everything is much bigger, closer together and further down aw I would expect. For the preview and the emulator im using the specs that are suitable for the pyhsical test device (One Plus 8 Pro).

In other questions I've seen answers say, that it might be a problem that I hardcode some dimensions using dp since the display has a high dpi (xhdpi to be exact) but even using only constraints or using the px the preview and emulator always differ from the app on the actual device. Following are the pictures and the xml:

<?xml version="1.0" encoding="utf-8"?>
<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=".EntryActivity">

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity=""
    android:layout_marginTop="416px"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:text="@string/header_text"
    android:textAlignment="center"
    android:textSize="24sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageButton
    android:id="@+id/buttonPlay"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="336dp"
    android:adjustViewBounds="true"
    android:backgroundTint="#00FFFFFF"
    android:onClick="changeActivity"
    android:scaleType="fitCenter"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    app:srcCompat="@drawable/button_play_02" />

<ImageButton
    android:id="@+id/buttonCreate"
    android:layout_width="156dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="340dp"
    android:layout_marginEnd="20dp"
    android:adjustViewBounds="true"
    android:backgroundTint="#00FFFFFF"
    android:onClick="changeActivity"
    android:scaleType="fitCenter"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.993"
    app:layout_constraintStart_toEndOf="@+id/buttonPlay"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    app:srcCompat="@drawable/button_create" />

</androidx.constraintlayout.widget.ConstraintLayout>

Preview in Android Studio

Emulator

Physical Device

Answer 1

I think you are doing a lot of rookie mistakes regarding Constraint layout.

As you said you are a beginner, I'd suggest you try to use relative layout.

If you want to stick to constraint layout, here's a quick tutorial which would make your basics strong for constraint layout: Youtube:Code in Flow playlist for Constraint Layout

Quick tip:

1. If you are focusing on getting constraints right, try to keep the layout(height and width) of buttons identical.

for one of the buttons, you've used the code chunk:

android:layout_width="0dp" android:layout_height="wrap_content"

and for other button you've used:

android:layout_width="156dp" android:layout_height="wrap_content"

2. very important; consider chaining the items hard. Don't worry! it's very minor thing. you'll get things alright once you go through the link.