Android Studio – clickable areas over an image in android studio (java)

I’ve inherited an Android Studio project with a challenging goal. Basically, the idea is that the app displays an image which is the map of a building (museum). When a user clicks on a room, the app displays the name of that room, and then they have some other options to do things. This works fine as long as we design the app for use one a single device and don’t ever plan to use it on anything else, which of course is silly. I have been able to get the map image to be responsive to different size screens just fine. The problem I have is with the buttons, which were drawn over portions of the map during design.

I have used ConstraintLayout, but it isn’t doing what I need. For one, the buttons don’t really move the way I would expect. For example, when I run the app on a tablet, the image resizes fine, but the buttons are all clustered in one quadrant; they didn’t really move with the image resize the way I expected.

The second issue is the button size. Even if the buttons did move when on a larger screen (let’s just assume they did), the buttons themselves don’t resize. I have tried WRAP_CONTENT, but then it sizes it larger than I want it even in design. Setting it to 0dp just makes a 1 pixel button (not sure why). Is there some way to get the button size to grow in proportion to the image growth when responding to different screen sizes? In other words, in the layout design, I want to be able to specify the button dimensions so that they cover the exact portion of the map image I want, but then when the image grows, I want the button to grow a proportional amount, so that it mostly stays lined up with the room to which it corresponds.

I have read about using an overlay image with colored areas as a workaround, but this won’t be practical in some room images where there will be in excess of 20 clickable areas.

I hope that explanation is clear enough. Thanks in advance for any help.

The buttons (there are many of them) are defined in the layout like this:

<Button
    android:id="@+id/LateGothicHallBtn"
    android:layout_width="46dp"
    android:layout_height="102dp"
    android:layout_marginEnd="80dp"
    android:layout_marginBottom="221dp"
    android:background="#00FFFFFF"
    app:layout_constraintBottom_toBottomOf="@+id/FirstFloorMap"
    app:layout_constraintEnd_toEndOf="@+id/FirstFloorMap" />

And then there is a listener for when the button is clicked:

    Button LateGothicHallBtn = findViewById(R.id.LateGothicHallBtn);
    LateGothicHallBtn.setOnClickListener(this);

If you need it the ImageView code is this:

<ImageView
    android:id="@+id/FirstFloorMap"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:contentDescription="@string/first_floor"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/gui2" />

Is that what you need?