0

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?

JediMark
  • 1
  • 1

2 Answers2

0

In your position, I would advise you to look at libraries that have the functionality you need, for example, AndroidImageMap. If necessary, you can download them, insert them into your project as a module and change the code. Also check these questions, I think it will make it clearer: clickable area of image, How to make certain areas in an image clickable in android

Roman Popov
  • 321
  • 5
  • 15
0

That's not that hard to achieve, you need to override onMeasure in the parent ViewGroup that has the image in the background, and knowing its original size you get the scale to the new dimension you wanna fit then you multiply all coordinates by it: the background image and all buttons l,t,r,b in a similar way AbsoluteLayout works

I myself also prefer to override onDraw and onTouchEvent and draw/click the buttons in the same component, but you can make it work with the android.Button

I can provide more help if you add your code

Marcos Vasconcelos
  • 18,136
  • 30
  • 106
  • 167