How to make proportional screens on different phones on Android?

Question

I’m taking a beating to get that answer, so who knows who around here can give me a little help...

I need to place a certain screen, a background image, and a series of buttons superimposed on this image, aligned with certain image positions. When I scale everything to my mobile (in this case, a Motorola Moto G4 Plus), I can fix everything right. But if I run on an emulator of another phone, as for example in a Nexus 5, the buttons already fall in different places...

I tried to use the feature Constraintlayout, so that the references of the buttons were "tied" in the limits of the background image, but it did not work... Someone has done something similar?

To illustrate better, I will put here a snippet of my code. First, the xml that represents this screen:

<android.support.constraint.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/flByCapo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/ivGuitar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/guitar_arm" />

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tvByCapo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="@string/strChangeCapo"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="22sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="@+id/ivGuitar"
        tools:layout_editor_absoluteX="0dp" />

    <Button
        android:id="@+id/b0"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="194dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b1"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="149dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b2"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="178dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b3"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="202dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b4"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="226dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b5"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="248dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b6"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="269dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

    <Button
        android:id="@+id/b7"
        android:layout_width="15dp"
        android:layout_height="50dp"
        android:layout_marginEnd="289dp"
        android:layout_marginTop="162dp"
        android:background="@drawable/capo"
        app:layout_constraintEnd_toEndOf="@id/ivGuitar"
        app:layout_constraintTop_toTopOf="@id/ivGuitar" />

</android.support.constraint.ConstraintLayout>

This is an image of a guitar arm, and on it I put small black buttons, simulating capotrastes (for those who are not musicians, it is a tool that presses the strings in various positions of the arm of the instrument, to change the tone of the music)Each one in a position. By code I control which button should appear and which ones are "almost" invisible. The problem is that, when on my phone everything is straight, if I test on another screen size, the buttons fall in wrong places, outside the image of the guitar arm...

I’d appreciate it if someone could help!

Answer 1

Hello! In order to use the compatibility in other cell phones, there is usually no use of fixed spaces. For example, in this code snippet (excerpt below) the margins you are giving may look good for your mobile screen, but for smaller or even larger mobile phones, these margins have very different sizes...

 <Button
    android:id="@+id/b6"
    android:layout_width="15dp"
    android:layout_height="50dp"
    android:layout_marginEnd="269dp"
    android:layout_marginTop="162dp"
    android:background="@drawable/capo"
    app:layout_constraintEnd_toEndOf="@id/ivGuitar"
    app:layout_constraintTop_toTopOf="@id/ivGuitar" />

To have a responsiveness for screens of different sizes, I advise to always use attributes, match_parent, wrap_content and weights for layouts. In your case, as you want to make a very dynamic screen, you can work with frame layout and layout Constraint, since they are modes in which you can allocate objects in various places of the screen and that has a responsiveness to various screen sizes.

Take a look at this link: https://developer.android.com/training/constraint-layout/