Scaling of components and UI design

[Adhil_Salim]

Hi all,
please look at these images
1

2

This is the home page of one of my app. The problem is that in my mom’s phone it looks perfect (circle shape) but in my phone it looks like a colourful egg (not a perfect circle)

I used percentage for height and width (for all components)

Any solution/suggestion(s) regarding this?

Thanks in advance

[Italo]

Calculate the height or the width according to the screen size.
Then make the other value the same.
Example: if your width = 64, then make the height also 64.

[Adhil_Salim]

Thank you @Italo I will try that,
Do I need to import any extension for that?

[dora_paz (Dora)]

No need of extension

[Romnigames (Romnigames Ltd)]

I don’t know if this is particularly relevant, but I have 2 games that use the canvas.

On phones with a 16:9 aspect ratio the components are placed perfectly and everything works as it should.

But on phones with aspect ratios eg 20:9, 19:9 etc the components are not where they should be and things move at different speeds.

Just 15 minutes ago I had the idea of turning the canvas into a square. This way I can do percentage calculations to align everything and move things so every phone regardless of aspect ratio gets the same experience.

My initial test suggests this may work but I need to go to work soon so when I come back tonight I will work on it.

Whether you can do this for normal screens I don’t know but it may be worth experimenting.