The layout of my app doesn't adapte to different device resolutions in Android Studio

Question

I was making the design of my app but I realised that my design doesn't adapte to different screen devices. I know that RelativeLayout could work but it doesn't and my problem persists. I am using the latest version for Android Studio. I'm too desperate because I try out all options..

What is the solution for my design to adapt to any screen?

Thank you.

<?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="#455A64"
    android:visibility="visible"
    tools:context=".MainActivity"
    tools:visibility="visible">

    <ImageButton
        android:id="@+id/icon_interrogante"
        android:layout_width="55dp"
        android:layout_height="54dp"
        android:layout_marginStart="307dp"
        android:layout_marginLeft="307dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="8dp"
        android:onClick="Interrogante"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.012"
        app:srcCompat="@mipmap/icon_interrogante" />

    <ImageButton
        android:id="@+id/icon_engranaje"
        android:layout_width="64dp"
        android:layout_height="68dp"
        android:layout_marginStart="192dp"
        android:layout_marginLeft="192dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@+id/icon_interrogante"
        app:layout_constraintHorizontal_bias="0.986"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/icon_engranaje" />

    <ImageView
        android:id="@+id/encabezado"
        android:layout_width="457dp"
        android:layout_height="196dp"
        android:layout_marginStart="25dp"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="410dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.784"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_engranaje"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@mipmap/encabezado" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

In Android, you need to consider the number of different screen sizes when developing an android application.

Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

It's true that you are using ConstraintLayout, but try to use it with guidelines and Chains to support different screen sizes.

Here is an example of the layout that you want using ConstraintLayout:

<?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="#455A64"
  android:visibility="visible"
  tools:context=".MainActivity"
  tools:visibility="visible">

<ImageButton
    android:id="@+id/icon_interrogante"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:onClick="Interrogante"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toTopOf="@+id/guideline5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline6"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@mipmap/ic_launcher" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="20dp" />

<ImageButton
    android:id="@+id/icon_engranaje"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline5"
    app:layout_constraintEnd_toStartOf="@+id/guideline6"
    app:layout_constraintStart_toStartOf="@+id/guideline7"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:srcCompat="@mipmap/ic_launcher" />

<ImageView
    android:id="@+id/encabezado"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline5"
    app:srcCompat="@mipmap/ic_launcher" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.15" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".8" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent=".6" />

</androidx.constraintlayout.widget.ConstraintLayout>

And it will look like this:

Notice that I can control the aspect ration of the images with app:layout_constraintDimensionRatio="1:1" and that this is an image from the preview because this is an example and you can change it according to your needs.