The app is rendering diffrent on my phone while looking fine on the emulator

Question

I created an app in Android Studio, and the UI on my phone is different from the UI on the emulator. I checked many different emulators similar to my phone, and the UI is looking good on them. The two examples are as follows:

Here is the emulator. The emulator is size 6.4 (1800 pixels x 2400 pixels) 420 DPI Google Pixel 3a XL API 34.

Here is my phone. My phone size is 6.7 (1800 pixels x 2400 pixels) 345 DPI Redmi Note 9 Pro.

Is there something I’m doing wrong that creates an unequal result between the emulator and the real device?

And the code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="40sp"
        android:text="@string/No_information"
        android:paddingHorizontal="100sp"
        android:textSize="15sp"
        android:layout_marginTop="100sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25sp"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/Num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/question_mark"
            android:textSize="55sp"
            android:layout_marginTop="10sp"/>

        <ImageView
            android:id="@+id/Compare"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icons8_question_mark_100"
            android:contentDescription="@string/question_mark"
            android:layout_marginLeft="25sp"
            android:layout_marginRight="25sp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Num2"
            android:text="@string/question_mark"
            android:textSize="55sp"
            android:layout_marginTop="10sp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginTop="25sp">

        <ImageView
            android:id="@+id/less_than_pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icons8_less_than_100"
            android:contentDescription="@string/less_than_pic"
            android:onClick="userChoose"/>

        <ImageView
            android:id="@+id/equal_to_pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icons8_equal_sign_100"
            android:contentDescription="@string/equal_to"
            android:layout_marginRight="30sp"
            android:layout_marginLeft="30sp"
            android:onClick="userChoose"/>

        <ImageView
            android:id="@+id/more_than_pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icons8_more_than_100"
            android:contentDescription="@string/more_than"
            android:onClick="userChoose"/>


    </LinearLayout>

    <Button
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/bNext"
        android:text="@string/next_numbers"
        android:backgroundTint="#87CEFA"
        android:background="@drawable/rectangle"
        android:layout_marginTop="10sp"
        android:onClick="makeNumbers"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="30sp"
            android:layout_marginTop="10sp">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/rb1"
                android:text="@string/_9_to_9"
                android:onClick="makeRange"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/rb2"
                android:text="@string/_99_to_99"
                android:onClick="makeRange"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/rb3"
                android:text="@string/_999_to_999"
                android:onClick="makeRange"/>

        </RadioGroup>

        <View
            android:layout_width="100sp"
            android:layout_height="match_parent"></View>

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bold"
                android:id="@+id/checkBold"
                android:onClick="toggleBold"
                android:layout_marginTop="10sp"/>

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/color"
                android:id="@+id/checkColor"
                android:onClick="toggleColors"/>

        </RadioGroup>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="20sp"
        android:paddingTop="10sp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/timeswon"
            android:text="You Were Right 0 Times"
            android:textSize="15sp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/timeslost"
            android:text="You Were Wrong 0 Times"
            android:layout_marginStart="35sp"
            android:textSize="15sp"/>

    </LinearLayout>

</LinearLayout>

Answer 1

It looks like your phone is set to locale that uses text written from right to left (like the Arabic language).

Here is other question that have good answers: How to override RTL support on a layout in Android

Basically, you can set android:layoutDirection="ltr" on any view you want to have a forced direction of laying out text/subviews, or you can disable RTL support in the application tag in the manifest.