How to Align Buttons to Background Image in Android

Question

I am trying to make a very simple "Zune emulator", in which I have an image of a Zune that I want to place transparent buttons over so that the user can seemingly click the buttons to utilize its functionality. This is the background image I'm using , and the play/pause button calls a method which plays an mp3, and the back button just closes the activity.

The issue I'm having is positioning the buttons over the buttons in the image. Using the constraints I was able to make them line up on my friend's phone, but not on mine, which has a different aspect ratio.

The closest thing I was able to find to answer to this was in this question, but all the answers seem to have misunderstood what the op was asking.

This is how my activity currently looks, with the dark gray rectangles being the buttons. Notice how they are both significantly below the buttons on the image.

How can I set the buttons so that they remain positioned over the same parts of the image no matter what aspect ratio the screen displaying it has? Should I be using the relative layout or something else? Is this even possible? Any help is appreciated

For reference, here is my current layout file:

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Zune">

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/zune" />

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.56" />

<Button
    android:id="@+id/play"
    style="@android:style/Widget.Holo.Button.Small"
    android:layout_width="40dp"
    android:layout_height="45dp"
    android:onClick="playZune"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintHorizontal_bias="0.91"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.83" />

<Button
    android:id="@+id/back"
    style="@android:style/Widget.Holo.Button.Small"
    android:layout_width="48dp"
    android:layout_height="55dp"
    android:layout_marginTop="16dp"
    android:onClick="clickBack"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="@+id/imageView2"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintStart_toStartOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    app:layout_constraintVertical_bias="0.845" />
</android.support.constraint.ConstraintLayout>

Answer 1

I have worked on similar projects and the two easy ways I managed to make things work were:

1. Don't include the button as part of the background, and instead, have it as a separate drawable.

and

2. Use a transparent button wich should, more or less literally, cover the button drawing on the background, so it gives the impression you are touching the fake button drawn on the background, even if it doesn't fit 100%.

In your case I think (2) would be a better option because the button is drawn sort of "integrated" with the borders of the screen.

For both alternatives, to position the button using a ContraintLayout , I added a horizontal guideline using a percentages of the height. In this way I create a rectangular region where to place the invisble button.
For example, in your layout, it looks like it would be a 25% or 30% from the bottom.

After placing the guideline , you constrain the invisible button's top to the guideline , and the bottom of the button to the bottom of the layout, and center it horizontally.

Hopefully most of the times the user hits the button on the background the invisible button would be touched.