My UI looks different in designer and on the device

Question

The resolution of my phone is 720x1280 and I'm using this resolution in Android Studio when designing my application. I have copied the images and the xml source below. What could be the reason for the difference and how can I get rid of it?

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

<TextView
    android:id="@+id/textView19"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Államadósság-Kezelő Központ"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="515dp"

        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView19"
        app:layout_constraintVertical_bias="0.0">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"

            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_weight="0.6"
                        android:paddingStart="0dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:text="A központi költségvetés adóssága:"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/date1"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="2018.11.30"
                        android:textAlignment="center" />

                    <TextView
                        android:id="@+id/data1"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="29005,02 Mrd Ft"
                        android:textAlignment="center" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_weight="0.6"
                        android:paddingStart="0dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:text="Maastrichti adósságráta:"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/date2"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="2018.11.30"
                        android:textAlignment="center" />

                    <TextView
                        android:id="@+id/data2"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="72.8%"
                        android:textAlignment="center" />
                </LinearLayout>
            </LinearLayout>

        </android.support.constraint.ConstraintLayout>
    </ScrollView>

</android.support.constraint.ConstraintLayout>

In android studio my design looks like this: but on my phone it looks different:

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The thing is that Android supports a wide range of different devices. Take a look which device Android studio is doing the "preview" on. Preview is what you see on top in your question. It may well be a different device than your emulator.

Furthermore, pay attention to this line: android:textSize="18sp". You are using SP as the dimension -> which means SCALE independent PIXELS. Take a look here for more info. But long story short, SP takes into account user's text size preference. What this means is in each Android phone's settings, you have an option to change text size to small, medium, large, extra large etc. So someone who set Large will have their text take up much more space than someone who picked small.

The solution

It isn't simple to solve this, and I don't know what you're trying to achieve, but you should try using:

good constraints (i.e. not letting stuff overlap)
maxWidth property
ellipsize property on your TextViews (adds "..." on the end/middle/start of long text if it can't fit)
maxLines if you don't want it to go over some number of lines

ConstraintLayout is very powerful and you should look more into it. You should probably align the left or right edges of stuff you need aligned, setting width to 0 also, since when it knows where it's left and right edges should be, it needs not have width.

As a feedback: you were right, if I set the the unit from sp to dp then the text looks exactly the same as in the designer. This is a bit over me at this point, so let me see if I understand this correctly: if I use DP as a unit then I guarantee that my texts look similar on every device. (and when I say similar I mean that if my text takes lets 60% of my screen then it will take 60% of the screen on each devices). On the other hand SP takes the user font size setting under consideration. Do I understand this correctly? — Istvanb, Jan 21 '19 at 19:17
Yeah, you do. Refer to the link I posted in the answer for differences between different dimensions in Android (px, dp, sp, dip, pt). It is recommended to use SP always for text sizes. There's different ways to approach this issue as I said. You can also leave text size as dp and it'll be fine too. — Vucko, Jan 21 '19 at 19:57

My UI looks different in designer and on the device

1 Answers1

The solution