Android Studio Layout changes on real device

Question

I have a problem with the layout on the Android Studio. The Editor (XML file) and Emulator (Nexus 10) shows the layout right. But if I run the app on my Huawei Mediaped M5, the layout changes and everything is mixed.

The Emulator and my device have the same Resolution(2560*1600).

The XML file:

<?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"
tools:context=".MainActivity">

<Button
    android:id="@+id/button_fahrzeugsimulation"
    android:layout_width="461dp"
    android:layout_height="203dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="108dp"
    android:layout_marginTop="173dp"
    android:background="@android:color/holo_blue_dark"
    android:text="Fahrzeugsimulation"
    android:textColor="#ffffff"
    android:textSize="38sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/button_uebungen"
    android:layout_width="457dp"
    android:layout_height="182dp"
    android:layout_alignParentBottom="true"
    android:layout_alignStart="@+id/button_fahrzeugsimulation"
    android:layout_marginBottom="106dp"
    android:background="@android:color/holo_blue_dark"
    android:text="Übungen"
    android:textColor="#ffffff"
    android:textSize="38sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/button_Weiterbildungsangebot"
    android:layout_width="wrap_content"
    android:layout_height="207dp"
    android:layout_alignBottom="@+id/button_fahrzeugsimulation"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="107dp"
    android:background="@android:color/holo_blue_dark"
    android:text="Weiterbildungsangebot"
    android:textColor="#ffffff"
    android:textSize="38sp"
    android:textStyle="bold" />

<Button
    android:id="@+id/button_Unterlagen"
    android:layout_width="498dp"
    android:layout_height="185dp"
    android:layout_alignStart="@+id/button_Weiterbildungsangebot"
    android:layout_alignTop="@+id/button_uebungen"
    android:layout_marginStart="-6dp"
    android:layout_marginTop="-2dp"
    android:background="@android:color/holo_blue_dark"
    android:text="Unterlagen"
    android:textColor="#ffffff"
    android:textSize="38sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/textView_eMobility"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:text="eMobility"
    android:textColor="@android:color/holo_blue_dark"
    android:textStyle="bold"
    android:textSize="64sp" />

<TextView
    android:id="@+id/textView_Lab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/textView_eMobility"
    android:layout_toEndOf="@+id/textView_eMobility"
    android:text="Lab"
    android:textColor="@android:color/holo_red_light"
    android:textStyle="bold"
    android:textSize="52sp" />

Answer 1

I think the problem is that the screen width of real device is not the same of the emulator, so you need

to create different layouts to support design for your screen width and height and in each layout,

change views dimensions to fit the screen..

this documentation would help : https://developer.android.com/training/multiscreen/screensizes

Also you should avoid using relative and linear layouts and setting fixed width and fixed height, I suggest using constraint layout, that will help in creating a responsive UI.

Answer 2

The device which your testing resolution is different from which you are trying to test on device(Huawei Mediaped M5)

So you are facing the issue.Even you are using marginstart in your layout.There are some static values which will vary with devices.

like this values:

android:layout_width="457dp"
android:layout_height="182dp"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"

device screen sizes check below link which shows nexus10 and Huawei Mediaped M5

screen size is different