为什么 Android 应用在某些手机上看起来不一样

Question

I have an Android app that, in most phones it looks as want to. Like this:

But in some phones, texts looks too big and everything looses proportions. Like this:

One of my xml file is this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="independent.dev.ui.Activities.WheelActivity"
    android:background="@drawable/wheel_background"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@drawable/wheel_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:text="Convertidor de graduación"
            android:layout_gravity="center"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        android:layout_marginHorizontal="30dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="65dp"
                android:background="@drawable/isotype_green"
                android:layout_marginTop="50dp"
                android:layout_centerHorizontal="true"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                android:layout_marginTop="50dp"
                android:layout_alignParentBottom="true">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="@string/wheelOriginalScale"
                    android:fontFamily="@font/helvetica"
                    android:textSize="24sp"
                    android:textColor="@color/white"
                    android:layout_weight="1"
                    android:textAlignment="center"/>

                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="@color/white"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="@string/wheelGrades"
                    android:textAlignment="center"
                    android:fontFamily="@font/helveticabold"
                    android:textSize="28sp"
                    android:textColor="@color/white"
                    android:layout_weight="1"
                    android:layout_gravity="center"/>

                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="@color/white"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="@string/wheelObjectiveScale"
                    android:textAlignment="center"
                    android:fontFamily="@font/helvetica"
                    android:textSize="24sp"
                    android:textColor="@color/white"
                    android:layout_weight="1"/>
            </LinearLayout>
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_weight="0.8">

            <com.aigestudio.wheelpicker.WheelPicker
                android:id="@+id/wOriginalScale"
                android:layout_width="0dp"
                android:layout_height="180dp"
                android:layout_weight="1"
                android:fontFamily="@font/helveticabold"/>

            <com.aigestudio.wheelpicker.WheelPicker
                android:id="@+id/wGrades"
                android:layout_width="0dp"
                android:layout_height="180dp"
                android:layout_weight="1"
                android:fontFamily="@font/helveticabold"/>

            <com.aigestudio.wheelpicker.WheelPicker
                android:id="@+id/wObjectiveScale"
                android:layout_width="0dp"
                android:layout_height="180dp"
                android:layout_weight="1"
                android:fontFamily="@font/helveticabold"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="0.7">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="@drawable/view_border"
                android:paddingHorizontal="20dp"
                android:layout_gravity="center">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/helveticabold"
                    android:text="Resultado:  "
                    android:textColor="@color/appGreen"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/tvResult"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30sp"
                    android:text="5.4"
                    android:textColor="@color/white"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

I don't know why this happens. At the beginning of the app, in those phones that now looks weird, that app crashed because the images I'm using were too big so I created the "drawable-xxhdpi" folder, move pictures there, and now the app doesn't crashes but it looks like this. Any ideas of what could be happening??? Many thanks!

Answer 1

for solve this problem you should be use ConstraintLayout instead of LinearLayout

please try to learn about Constraint layout and read below link

https://developer.android.com/training/multiscreen/screensizes

Answer 2

Android App UI might look differently on different devices because the screen height and width of all android device are not the same. The App might look perfect on a Large Screen device and look bigger on a small screen device. To correct this error I somethings use layoutweight and weightsum to device my screen in a fixed ratio so that it maintain the same ratio in all devices. I also use sdp and ssp library to make my text and drawable have similar size in different device.

Here is a single layout built using sdp: sample of sdp layout

Here is a sample of layout built using dp; sampe of the usual dp layout Check out this android library, it helps in giving adequate proportion of your layout in different devices.

https://github.com/intuit/sdp