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>

Please look at the official documentation of Android for Multiple Screen Resolution support. — Hardik Chauhan, Jul 12 '19 at 09:18
Also you can find some good library as well to achieve the same. — Hardik Chauhan, Jul 12 '19 at 09:18
Possible Duplicate https://stackoverflow.com/questions/8255985/how-to-support-different-screen-size-in-android — Xay, Jul 12 '19 at 09:24
Don't use hardcoded sizes for Views. Yours is way too specific which can cause issues depending on the user settings like font size, screen height, DPI etc. — Zun, Jul 12 '19 at 09:44
@Zun Which is alternative to don't use hardcoded sizes? Thanks. — Sergio Cámbara, Jul 12 '19 at 09:51
I can't explain this in a comment but watch or read some guides on layouts — Zun, Jul 12 '19 at 11:17

score 0 · Accepted Answer · answered Jul 12 '19 at 11:55

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.

Yeah I know but guidelines and chains only help to organizase your layout and it's not point. I'm seriously thinking on develop different layouts. Thanks. — Sergio Cámbara, Jul 12 '19 at 12:18
Look at my layout, it will be responsive to all screen sizes without using a single fixed size on my views — Tamir Abutbul, Jul 12 '19 at 12:19
You are right. I tested your code and it works. Although on tablets (horizontal) the images don't be responsive, why?! Anyways, thank you. I would appreciate you if you can explain me exactly what did you to my layout. — Sergio Cámbara, Jul 12 '19 at 12:41
About the image - remove `app:layout_constraintDimensionRatio="1:1"` from the XML . this line is saying - keep my image with some aspect ratio(1:1 in my case), all I did was to take your layout and add some guidelines with `app:layout_constraintGuide_percent="0.15"` to make it responsive to your screen. later on, I constrained my views to them. And there you have it - responsive layout for all screen sizes — Tamir Abutbul, Jul 12 '19 at 12:58
And also you can use ` android:scaleType="fitXY"` to make your image spread all over the available space — Tamir Abutbul, Jul 12 '19 at 12:59
Okay, I understand it! I'll use android:scaleType="fitXY" to scale images. Thanks for your advices, I'll learn how to use guidelines and chains. — Sergio Cámbara, Jul 12 '19 at 13:17

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

1 Answers1