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>
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.