How to make my xml code fit on all devices

Question

<?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"
    android:background="@drawable/bgpic"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".LonelyMoviePageActivity">

    <ImageView
        android:id="@+id/movieImgView"
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="10dp"
        tools:src="@drawable/gmp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="10dp">

        <TextView
            android:id="@+id/movieName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:gravity="center"
            android:textColor="@color/white"
            tools:text="Gravity"
            android:textSize="30sp"/>

        <TextView
            android:id="@+id/movieYear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="(2016)"
            android:textSize="30sp"
            android:textColor="@color/white"/>
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="In a Series:"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_marginEnd="10dp"
            />

        <TextView
            android:id="@+id/seriesOrNoText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="No"
            android:textSize="20sp"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="70dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Rating:"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_marginEnd="10dp"
            />

        <TextView
            android:id="@+id/movieRatingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:text="R"
            android:textSize="20sp"
            android:textColor="@color/white"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="10dp">

        <Button
            android:id="@+id/btnPrevious"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:paddingStart="5dp"
            android:paddingEnd="5dp"
            android:text="Previous"
            android:background="@drawable/buttonbg"
            />

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="Next"
            android:background="@drawable/buttonbg"
            />

    </LinearLayout>

</LinearLayout>

I tried that code on my phone, it worked perfectly, however, I tried on my mom's phone, it was awfull, any idea how do I make it fit on all devices Online sites say that it's better to use a constraint layout, however, that would mess up all I've done, any help. I don't have an emulator installed on android studio, cuz some answer was involving it.

Answer 1

Remove all LinearLayouts and add one ConstraintLayout at the top level, which constrains Views to each other including the edge of the screen. Meaning it will condense (within reason) and expand to fit the screen size as there is no need to hardcode dp sizes https://developer.android.com/training/constraint-layout

Answer 2

The trick to scalibility is to never hardcode dp values on your views. Instead use a ConstraintLayout and constrain your views. I recommend looking into the 'guideline' view, it's very useful when trying to make scalable apps.