I'm picking up a lot to get this answer, so who knows, someone around here can give me a hand ...
I need to put on a particular screen, a background image, and a series of buttons superimposed on this image, aligned with certain positions of the image. When I scale everything to my cell phone (in this case, a Motorola Moto G4 Plus), I can set everything right. But if you run into an emulator of another cell phone, such as a Nexus 5, the buttons already fall into different places ...
I tried to use the ConstraintLayout feature, so that button references were "tied" to the boundaries of the background image, but it did not work ... Has anyone ever done anything like this?
For example, I'll put a snippet of my code here. 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 placed small black buttons, simulating capotrastes (for non-musicians, it is a tool that presses the strings in varied positions of the instrument arm, to change the pitch of the song), each 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 correct, if I try on another screen size, the buttons fall in the wrong places, outside the image of the guitar arm ...
Thank you if anyone can help!