Image distortion App_Inventor vs Cell phone screen

Dear friends of the forum … it is interesting what can be done with App_Inventor
I want to make an application for people to make decisions before … to go to the doctor, emergency or stay home.

I have uploaded an image of a bust, … where color points (Ball) must be pointed out (they must change according to the value in the textbox). In this startup I have the problem that what I do in App_Inventor does not look the same on the cell phone screen, it is distorted. How do I keep it from moving and everything stays in place like the design in App_Inventor?
I have reviewed a similar topic in the forum, but it is not my situation, it does not help me
Thanks in advanceApp_InventorI upload imagesApp_InventorImag

Phone Screen

Easiest way is to fix the size of the canvas, then all the points will stay where they are meant to. ( I assume you are using a canvas…)

However that may not look great or be very big if a user is on a 10" tablet and you design for a 4" phone. in which case you will have to size and position everything proportionately to the screen size at run time, which may require the inclusion of clocks to give the canvas time to catch up with its self.

See also here GUI Layout for some ideas

The ‘bust’ appears to be an image on a Canvas. Is that correct?

I think you set the Canvas H and W to Automatic. Instead, set them to fixed pixels and your red or green balls should always be in the same location

1 Like

Yes, it is an image in .png format

The image is incorporated in the vertical layout

@TIMAI2 and @SteveJG I don’t know where I should fix the balls, in the properties I don’t see that option.
Sorry, it is not easy for me to review and understand the instructions soon. I’m not even an expert

The X and Y values…(and the Radius for size), you organise the coordinates (X,Y) in relation to the canvas size

1 Like

Dear @TIMAI2
The coordinates move automatically when I position the ball.
I prefer to send the link QR to see if you can check it


I can’t use that qrcode, this is for use locally on your computer/device.

You would need to download your aia project to your computer then upload it here

Thanks in advance for the support, … actually I have done all this in Excel, but not everyone has immediate access to use it, it is more useful directly from the cell phone.
This is for people to make good decisions regarding COVID-19 symptoms and to go to the hospital depending on the situation they are in.
I suggest seeing my excel file first.

My Excel file

FFCOVID19.aia (107.8 KB)

Which cell in your spreadsheet has the summary formula?
(Never mind, I found the hidden sheet tabla)

An interesting app.

I did not know arithmetic constant blocks (blue) could be empty.
Have you run your sum procedure successfully against empty text values?

the truth, I don’t know much about this but, you are right the observations that you give me

in case the summation of blank input gives you trouble, here are two revised procedures to handle that …
NZ Sum
They are draggable, directly from this post into your Blocks Editor window.

1 Like

It is probably easier if I provide an example, you will have to do some maths, and apply it to your project.

I did not know it...!!
that good...
But from my block editor windows to this answer page I don't see what can be done, .. however you have done it ..

On the other hand, in the NZ procedure, why should you ask if it is a number when we know that a number is going to be put ...
Not that we should say yes, it is a number .. "value"

This is an example of bulletproofing, where you want to gracefully handle something unexpected.
The ‘+’ blocks are fragile, and will choke on blank input.
I assume the worst when handling user input.

To start off with, we use a canvas of fixed size, to get out reference points
In this image,

  • the canvas is set to 300x300 pixels
  • the ball has a radius of 10 - (10x10 pixels)
  • the balls coordinates are X = 50, Y = 127
  • the ball is set to “origin at center”
  • we must assume that the canvas always maintains its aspect ratio

the radius is therefore 1/30th of the canvas size (0.033)
we only have one dimension for the radius, therefore
use the width


Whatever the canvas width, we can define the radius of the ball

the balls X coordinate, in relation to the canvas is
50 / 300 (width) = 0.167
therefore the X coordinate is always 16.7% of the canvas width


Whatever the canvas width is, we can define the X coordinate of the ball

the balls Y coordinate, in relation to the canvas is
127 / 300 (height) = 0.423
therefore the Y coordinate is always 42.3% of the canvas height


Whatever the canvas height is, we can define the Y coordinate of the ball

In this way, you can set the relative / proportional positions for your ball sprites based upon the canvas size. As I previously mentioned, you may need to use a clock timer to set all the positions, as it can take a few milliseconds for the canvas to work out what its width and height is.

@TIMAI2 a and @ABG and SteveJG
Thanks for the support, he tried to continue understanding the thing about the fixed coordinates for the balls … but I think that the dimensions of the horizontal and vertical designs have not adjusted as I have explained. all right …
Until then I have advanced in the design and I have selected buttons to increase or decrease the varlor when you select a text box to avoid using the keyboard … even so the keyboard continues to appear …
I upload the file to see the progress

Thank you for helping me complete this application, then I will send people from my town

FFCOVID19.aia (122.3 KB)

I could not stop the keyboards from popping up, so I disabled all textboxes and used the balls as textbox selectors, with a clock to blink the appropriate ball.

I introduced global variables to hold the current textbox component and ball component.

I also change Label1.Text to name the text box currently selected, from its Hint.
(I leave it to you to set the Hints for the 10 textboxes in the Designer, it’s tedious.)
The + and - buttons are now the only way to change the text box contents.

Generics, lists, and value procedures shrink the app considerably.
global balls global selected_ball global selected_textbox global textboxes


NZ score tbx upper_limit

when any ball touched when Btnmas click when Btnmenos Click when clock1 timer

FFCOVID19V2.aia (112.1 KB)

1 Like