Why is my layout blowing up on physical devices?

Question

I am learning android studio following a Udemy course.

The course itself is all fine and I'm getting on well with it. The only issue is, my laptop is weak, like 8gbs of ram weak. So running emulators like the instructor in the video is doing is a very lengthy process for me. Fortunately, i have a S24 Ultra so i can test on that.

The issue is, all of the apps i make, they are showing as way bigger on my phone then in the design window. I have tried loads of different device option and emulators and they all look fine until i go on the actual device.

I don't understand what I'm doing wrong. I'm using Constraint Layout and constraining all of the view object.

Here is what it should look like:

Here's what it looks like on my phone:

The Code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/wallpaper"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="72sp"
        android:text="French Teacher"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/blackButton"
        android:layout_width="150sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="200sp"
        android:backgroundTint="@color/white"
        android:text="Black"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <Button
        android:id="@+id/greenButton"
        android:layout_width="150sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60sp"
        android:backgroundTint="@color/white"
        android:text="Green"
        android:textColor="#45FA02"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/blackButton" />

    <Button
        android:id="@+id/purpleButton"
        android:layout_width="150sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60sp"
        android:backgroundTint="@color/white"
        android:text="Purple"
        android:textColor="#A61AF3"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/greenButton" />

    <Button
        android:id="@+id/redButton"
        android:layout_width="150sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60sp"
        android:backgroundTint="@color/white"
        android:text="Red"
        android:textColor="#FB5B11"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/purpleButton" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="150sp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60sp"
        android:backgroundTint="@color/white"
        android:text="Yellow"
        android:textColor="#FFF27F"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redButton" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="1028dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Please help, I'm going out of my mind trying to figure this out as it makes no sense to me.

Just to note:

1. My partner has a S24 ultra too (same thing)
2. Neither of us has any font scaling, when i try to mess with the font scaling device side it doesn't really change)
3. Neither phone has screen zoom on too but it looks like thats what's happening as i lose some of the bottom

I have tried both SP and DP for sizing's and it makes no difference

The preview is not the issue, i know where that is and have tried it on every possible preview device. The only device that looks similar to what my S24 shows is the pixel 3? this makes no sense as it's way smaller and less DPI

Answer 1

sp should only be used for font sizes for Text, not for layout margins/padding.

You need to add dimensions for different screen sizes, then read the values from @dimen/name_of_dimension and apply it to your control.

Basically have a folder for different screen densities (for example values-sw320dp, which means any device with 320dp for screen width or more). Each dimen.xml file in each folder, will contain values that work for the specific screen width.

This allows you to adjust different margins/padding, etc, based on screen sizes.

Each xml file (in each values folder) will contain something like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen
        name="example_dimension"
        >32dp</dimen>
</resources>

Then just apply that dimension to your control:

<Button android:layout_marginTop="@dimen/example_dimension"/>

Android will read the value to use based on the screen size of your physical device.

Answer 2

I have paste the above code in my android studio, see the output (I have change background to blue color because your background is available, you set with your one)

Now i have set to your desired oputput shown in picture above

code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blueLight">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="52dp"
        android:text="French Teacher"
        android:textColor="@color/white"
        android:textSize="32sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/blackButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:layout_marginTop="110dp"
        android:text="Black"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <Button
        android:id="@+id/greenButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:layout_marginTop="30dp"
        android:text="Green"
        android:textColor="#45FA02"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/blackButton" />

    <Button
        android:id="@+id/purpleButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:layout_marginTop="30dp"
        android:text="Purple"
        android:textColor="#A61AF3"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/greenButton" />

    <Button
        android:id="@+id/redButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:layout_marginTop="30dp"
        android:text="Red"
        android:textColor="#FB5B11"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/purpleButton" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:layout_marginTop="30dp"
        android:text="Yellow"
        android:textColor="#FFF27F"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redButton" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="1028dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

my output:

In android studio, some time pixels define in design does'nt get set in android screen, so you have manually set the pixels in android studio xml design.