Scaling of components and UI design

Hi all,
please look at these images :blush:
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 :grin: (not a perfect circle)

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

Any solution/suggestion(s) regarding this?

Thanks in advance :blush:

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.

1 Like

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

1 Like

No need of extension

4 Likes

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.