Adjusting the UI made for 16:9 on devices that are using 18:9 screens

Hello. I’m beginning to work on a new game and trying to do it on Android, but I run into this issue:
Imgur: The magic of the Internet
16:9
image 1
18:9
image 2

I fixed so the UI stays in screen by setting the Canvas and for example the top-left Weather UI like this:
image 3 and image 4

  • I want it so the UI on both top left and right will go to the corner like in the 16:9 even when it’s 18:9.

I’ve set the anchors to the UI elements in the top-left (and top-right for the settings button).
I tried to do the setup for 18:9 and change the Match from width-height to be 0 instead of 1, but then when a device with 16:9 tries the game, the UI is shrinking towards the center and there too much space on top and bottom of the screen, instead of left and right like in my current issue.

You probably want to chop the the left / right batches of UI elements out and put them in their own sub-rectangles that are anchored and positioned at the corners.

I do this a ton, and you can instantly test it in a blank scene to see what I mean. It lets you anchor a specific part to a corner and have it never leave there, while other stuff flows as expected.

Here are the official docs on how to make your UI handle various resolutions and aspect ratios cleanly:

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

Here’s some more fit-inside-UI-content notes:

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.