Responsive screen vs. image sprite / ball

I put several Ball to my Canvas with backgound image which height and width are set to fill parent.
The Screen’s sizing is set to Responsive.

The Balls are “moving” their static position depending on what device I choose.

I think the Balls should be static comparing to the Canvas’ backgound image.

The most right ball’s x position is 617 and the radius is 20. This means that the ball is not in the expected position at all. (Samsung Galaxy S9 screen resolution is 2,960x1,440 pixels, so the most right ball should be somewhere at 20% from the left)

The main problem is that the position of balls are different on real mobile device screens. So I am not able to create an app with the same look on different type of mobile devices. (The balls are used as buttons for controlling IoT functions).


Android version 5.0 (but it is indifferent)

1 Like

The designer screen is not an actual representation of the real device screen for the simple fact that there’s thousand of different screen sizes in the Android world. Therefore placing something on the designer screen is for reference only. The programmer (you) need to come up with a way of making the components, in this case balls, to move to the initial location depending on the screen size of the user that installed your app. For that, the best method is to use relative positioning, which usually means dividing the screen or canvas size to get accurate distances from the borders to place your balls in the right x,y.

2 Likes

I think the initial positioning could/should be done based on the canvas which is “fill parent”.

I mean:
if my canvas size is 1024x768 and I positioned the ball to (200,300), the Kodular should do the calculation and the initial position should be set to (200/1024 * 100 %, 300/768 * 100 %).

Doing it in the “initialization” blocks one-by-one calculating manually (with no real reference based on the “actual representation” of the real device screen) could be only done via the companion, which would take so many time, while Kodular designer has all the information.

It can be that way, yes. But unfortunately it’s not. The preview you have in the designer only works in pixels while the way you are proposing is a proportional or relative positioning.
I’ve done a lot of apps that places stuff at Screen1 initialization and it doesn’t take a lot of time really. Just make those calculations you posted in your last comment to be able to place the balls in the right spot. Just remember to use the canvas width and height values instead of the Screen1 width and height. In fact you can create a little procedure that will accept a percent for width and another for height and the sprite or ball you want to position, and it will reduce the number of blocks needed a lot.

The example will place the ball exactly in the middle of the canvas. 50% width and 50% height of the canvas. You can give any number from 0 to 100 on both and it will work too.

3 Likes

I improved my code to rescale / reposition all the “exact” elements to the right places.

There is a strange thing: I checked the size of ‘screen1’, which amazed me.

The phone I used to test is a Huawei P Smart. Its native resolution is 2160x1080.

And what screen1.height and width say is: 677x360

So using these values as a max value, everything is fine.

But why is the screen1 resolution is so much different from the native resolution?

It’s dp values…

2 Likes

I have always wondered about this as well. Now I get it. Thanks.

Thanks, now it’s clear.

(Just a suggestion: Wouldn’t you want to rename the px to dp in Kodular?)