Creating a virtual (transparent) button

Hi people. Need to know if it is possible to create a virtual button, to act as a real button, when pressed over each key, which ones make part of an image (in attach). Maybe to use a hidden button ... I don´t know if there is such component. Or show me the proper way to allow my app to treat a press over the keys, acting as a button press. I hope I was clear in my explanation ... Thanx a lot !!!

I hope I understood correctly

Why not just place a button there with no text in it and make its color the same as the background. It will look like there is no button when there really is

Hi Wes. Thanx for your reply. In fact I´ve tried that. But there is a symbol at the key along its collor. I thougth there was a "transparent" button color resource ... In fact this would work-out nicely !!! Besides, I´m facing some troubles to place a button exactly over the key draw ... and I have 5 keys in a row ... I also thought to use a "touch region" resource ... but I don´t know if this is availabel ... The point is: I´m a MIT APP beginner ... :frowning: ... Any way Wes, I thank you a lot for your feedback !!!

What is the purpose of this "virtual" button? What does virtual mean - invisible, transparent, ...)? How does the user then know to press that button and why to do it? For an invisible button (without border), only an empty (completely transparent) background image (empty.png, e.g. 2x2px in size) is required.

Here is a test aia with 3 buttons. The first and second with BackgroundColor = None. The second, however, with a background image (empty.png):
invisibleButton.aia (1.5 KB)

The border on the first button cannot be prevented without an empty.png background image, although you can weaken the border a bit with "Shape = rounded", for example.


Hi Anke. Thanx for your reply. The purpose of a virtual button is exactly as Wes explained: a button "invisible/transparent" in terms of shape but it is really there. The operator will know where and when to press due to the meaning of the text inside the each key draw.

Nice tip Anke. Thanx a lot again. I will test your aia suggestion. !!!

It worked-out Anke !!! But the challenge, to me, is:

  1. place a background image, with the keys on it (my attached image for example)
  2. place 5 buttons exactly over each key draw of my image ... this I really don´t know if it is possible ...
    If I learn how to do item [ 2 ], and using your button tips, it will be possible do conclude the app ... I´m gonna read the APP tech manuals ... I believe this must be possible to do ... Thanx Anke !

Unclear, please explain in more detail and/or post the aia.

Take a look at the image of my project. There are 5 keys on it. What I want to do is to place a button (back ground color = NONE, text = NO TEXT) over each one of these 5 keys. I think that the aia will clarify ...
BJ750_R01.aia (2.5 MB)


I count 6. And why aren't the buttons created the way they should look afterwards, but positioned on an image? In addition, the precise positioning on an image becomes problematic, because this would have to be adapted to the respective screen resolution.

You want a horizontal arrangement. Place five vertical arrangements inside. Place a button in each vertical arrangement. Set your images to the vertical arrangements. Organise the sizing, transparency of all components as required

I have an app with a row of 5 buttons. Two of the buttons are invisible as spaces.. In reality there are three buttons but actually I have 12! As I use the app the use of the buttons change and so does the text of the three buttons.

In the app I simply use If - Then - Else statements based on the text of the button.

Good mornin Anke. Had to sleep a bit ... sorry ... Well, in fact there are just 5 keys. The room between * and TARA keys is a space itself. And you are right about the positioning ... it is problematic. But everything would be solved if it was possible to create a button OVER an existing image and set button´s propereties to a transparent background color. Is this possible to do with MIT APP?

Hi TIMAI2 !!! Thanx for your feedback. Yes ... I need an horizontal arrangement ... your are right. I did exactly what you said. It worked-out. A big hard work pal !!! I had to place 8 VerticalArrangements over my main image. Then placed 2 buttons in each VerticalArrangement and let the upper buttons always disabled and transparent background color. And the lower buttons enabled, well positioned over the "keys draw" and with transparent background color. As I have a single image, I didnt´set any image to the VerticalArrangements. But ... it is a very hard work this way ... Isn´t it? I think it would be easier if it was possible to freely position a button (and a LABEL and TEXTBOX for example) in any place over an image. May be this be possible and I don´t know how to do it. Another possibility would be to treat a touch in a delimited region of the image and take the proper action ... Any way, your tip was fantastic TIMAI2 !!! Thanx a lot !!!

Good morning Wes. YES !!! I´ve already use this scheme. Works-out exactly the way you mentioned.

Try this one:
BJ750_R01_Anke.aia (1.2 MB)

Hi Anke !!! I will download your .aia and learn with it. Meanwhile I´v done a test app (just the components / no logic yet) with the tips of everybody. It looks the JPG image. Follows my .aia. Please don´t laugh a lot with the resources I´ve used. As I said: I´m newer with MIT APP ...

The colored buttons under the digits represent LEDs (I will create its image later ...). I´ve done this way to align both the LEDs, the text right under the LED, and the respective key. Seeing my .aia, you will note that all bottom buttons are with NONE background color.

Well ... I think I´m learning ... step by step ... but it will be better to build the apps in a proper way ... and I don´t know the way I´ve done my .aia is the best one. Any way ... let´s carry on!
BJ750_R01 (2).aia (2.5 MB)

As I said, this will not work on devices with significantly different dimensions/resolutions, nor in landscape mode, nor on tablets. Just try it in landscape format.

If you don't have different test devices and you would like to check it yourself, then use emulators or upload your app as an "internal test track" in the Google Play Dev console and wait for the Pre-launch Report and the screenshots that come with it.

Hi @xavas , I tried to solve it with a different approach, based on canvas.

Here's an example that maybe help. It's functional with # and Func "buttons", that change background color of two labels.

BJ750_R01_1_canvas.aia (2.5 MB)

Another option, is to use butonns in an horizontal arrangement, as is already suggested, but using an image of each component of the main image. This option has the plus that, if you use % to define each button, this will works in different devices.

BJ750_R01_1_btn.aia (2.5 MB)

Each option has its pros and cons, but finally will help you to learn antoher tools.

Just ideas.