How can I place arrangements in a specific location over a background & maintain background image aspect ratio?

MIT App Inventor Help
1

Hello fellow app inventors,

My problem is straightforward, but the solution doesn't seem to be.

I have 7 separate arrangements (I hope my terminology is correct - definitely a novice here). Each individual arrangement contains multiple elements, like a main label, multiple text boxes to enter text, sub-labels for these text boxes, and arrangements within the arrangement to...arrange these elements.

I want to place each of these 7 arrangements in their own hexagon (plus one in the center) in this hexagon / honeycomb pattern I've created below.

Untitled design
Untitled design1920×1920 127 KB

I've already created and tested this app as far as functionality goes, but now I want to improve its presentation, and I feel this would be a nice stylized "control panel" of sorts. My problem is, although on the app everything looks like it is where it should be (centered over each hexagon), once I open it on my phone, the background gets distorted and the elements move out of place (as well as other issues, like text getting cut off in strange ways).

Rather than explain what I've done to get this far, and solutions which I tried to no avail, I feel like it would be more productive to just start from zero. So I ask;

How do you position elements like an arrangement over a specific location on a background image, while ensuring that that background image maintains its aspect ratio?

2

I worked up something similar for a Catan game a while back. You will have to use the canvas to do this at the moment, but there is an all singing and dancing Absolute Arrangement in the pipeline that will help to do it with components. You may find an extension that will allow this type of alignment.

3

Thank you! I'll look into the extensions but I didn't see any mentioned that would allow for this. As for using the Canvas, I read elsewhere that that can't be used along with interactable components like text boxes - is that accurate?

I tried testing the Absolute Arrangements but I didn't see any way to actually set the coordinates even on the testing website, so I'm guessing it's still under development... or I missed something obvious. It sounds like exactly what I need though.

4

You could do something like this:

image

hexagons.aia (29.7 KB)

Place your background image of hexagons in a fixed size arrangement, then introduce a set of horizontal and vertical arrangements to "cover" the hexagons. You could then place components inside the vertical arrangements (in orange and green to highlight them)