Android Studio Different Screen Sizes

Question

Hello i make my first app in the Android Studio and i have some problem. I was read every stackoverflow's topics and android documentation about my problem but i still don't understand what i should do.

I uses a ConstraintLayout for application and uses "SDP" "SSP" library for different screen sizes. In the Android Studio preview on every devices (also my custom device) my app looks good screenshoot But when i test app on my phone (the same phone like a device in Android Studio "LG") the app isn't the same like in the preview screenshoot Like you can see some elements are disappear

What should I do to make the application on the phone look the same as in the preview and to be adapted to different devices and screen sizes?'

Here's my XML

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff11111a"
    android:theme="@style/Theme.PlayRPGMobile"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="@dimen/_230sdp"
        android:layout_height="@dimen/_300sdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_logo"
        app:layout_constraintVertical_bias="0.299"
        app:srcCompat="@drawable/rectangle" />

    <ImageView
        android:id="@+id/login_logo"
        android:layout_width="@dimen/_300sdp"
        android:layout_height="0dp"
        android:layout_marginTop="@dimen/_64sdp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.476"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_28sdp"
        android:fontFamily="sans-serif-medium"
        android:text="Wprowadź swoje dane"
        android:textSize="@dimen/_15ssp"
        app:layout_constraintBottom_toTopOf="@+id/loginEdit"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.0"
        tools:text="Wprowadź swoje dane" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_24sdp"
        android:fontFamily="sans-serif-medium"
        android:text="Play RPG © 2022"
        android:textSize="@dimen/_15ssp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:text="Play RPG © 2022" />

    <EditText
        android:id="@+id/loginEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_80sdp"
        android:background="#ff222228"
        android:ems="10"
        android:hint="Login..."
        android:inputType="textPersonName"
        android:minHeight="@dimen/_38sdp"
        android:paddingLeft="@dimen/_10sdp"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_2sdp"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.533"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <EditText
        android:id="@+id/passEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_20sdp"
        android:background="#ff222228"
        android:ems="10"
        android:hint="Hasło..."
        android:inputType="textPassword"
        android:minHeight="@dimen/_38sdp"
        android:paddingLeft="@dimen/_10sdp"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        app:layout_constraintEnd_toEndOf="@+id/loginEdit"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/loginEdit"
        app:layout_constraintTop_toBottomOf="@+id/loginEdit" />

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="@dimen/_130sdp"
        android:layout_height="@dimen/_38sdp"
        android:backgroundTint="#ff222228"
        android:fontFamily="sans-serif-medium"
        android:text="Zaloguj"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/pinEdit"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="@+id/pinEdit"
        app:layout_constraintTop_toBottomOf="@+id/pinEdit"
        app:layout_constraintVertical_bias="0.512" />

    <EditText
        android:id="@+id/pinEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_20sdp"
        android:background="#ff222228"
        android:ems="10"
        android:hint="PIN..."
        android:inputType="number"
        android:minHeight="@dimen/_38sdp"
        android:paddingLeft="@dimen/_10sdp"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        app:layout_constraintEnd_toEndOf="@+id/passEdit"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/passEdit"
        app:layout_constraintTop_toBottomOf="@+id/passEdit" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

For making responsive UI I would suggest using guidelines in constraint layout. You can take help of this constraint layout training guide . Also you can make use of chains in constraint layout Chains

Answer 2

Avoid hard-coded layout sizes for Different Screen Sizes

To ensure that your layout is flexible and adapts to different screen sizes, you should use wrap_content or match_parent for the width and height of most view components, instead of hard-coded sizes.

wrap_content tells the view to set its size to whatever is necessary to fit the content within that view.

match_parent makes the view expand to as much as possible within the parent view.

It would be helpful for you to look at the Android documentation .

Answer 3

Use guidelines and constraint the views to it. I faced the same problem and guidelines helped me a lot.