Overlapping (piano) buttons on MIT App Inventor

[KidsHubFolsom After-School Care Center]

How do you overlap multiple buttons on MIT App Inventor?

[TimAI2]

You cannot overlap button components (or any other components for that matter.

What you can do, with a bit of work, is overlap image sprites in a canvas. Image Sprites can generate events when touched, however you could easily run into problems by generating the events of two sprites at the same time from one touch

Another approach would be to create a graphical background which represents what look like "overlapping" buttons, with button components (that are transparent or have a transparent image) placed within the "drawn" buttons

Example HERE

[Chris Ward]

Hi

Can you describe your intent? Why does the App need buttons to overlap? Could a drop-down list be used instead?

It is possible to use one button, change it's text/image as required, and record it's state so that in each different guise it serves a different purpose.

[Chris Ward]

A short example. It could be more efficient but I chose simplicity.

If it's not what you are looking for, perhaps you can adapt it - or tell us exactly what you need to do :)

[Lauren Loverio]

I was planning on making a piano app for my assignment at school. In order t fit one octave on the screen, I have to overlap buttons. When I would try t place a button right next to one another, there would always be a gap in between. I want all of the buttons to be right next to each other, and have the black keys on top of the white keys.

[TimAI2]

Ah, you will be better off using a canvas for this, and define "touch zones" for each key. If using image sprites you will need 4 image types: black note, white note to left, white note to right, white note between. Or you could just take a decent image of an octave or two on a real piano, and use that as the canvas background, getting touch feedback is more difficult on the canvas, but can be done.

[SteveJG]

A few years ago a developer did something similar Lauren.  Unfortunately, I cannot find the Forum link.

He used a Canvas and I think he used hot spots to hit the appropriate keys.     Here is an octave 

to get you started.

I think the following will help set up the hot spots

using the above image.   Experiment, make a small Project with just the key board and see if you can male sense of this ... certainly more code is needed. Additional code is needed to provide a response when the indexX and indexY are set to certain values.     Something like   if indexX = xxxx and indexY = yyyy  then the note is 'G: else if ... then it is 'C'.

When you get something working , perhaps post your example aia here in the Forum Lauren?

Edit:  Found the link to Christian Feniou's post    https://groups.google.com/forum/#!searchin/mitappinventortest/grillerythme%7Csort:date/mitappinventortest/McxBue-pwzw/sw36hM9RJwYJ     code  There is an aia.

Regards,

Steve

[Chris Ward]

Well, I think it makes more sense to use buttons. Firstly, much easier to code and secondly reliability. The original concern about overlapping buttons? If you think about, they do not overlap on a real piano. The App Inventor Design View can catch you out, because neither it nor the Emulator accurately represent the GUI as it will be on the device. This because there is a huge difference in resolution and also the Designer is all about easy placement of the required components, rather than the aesthetics.

In the Designer:

On the phone (APK)