I do these sorts of constructs above with multiple layers of UI.
For instance, I would have either 3D, 2D or Canvas with UI for the central gameplay area, the red in your case above.
Then I would have a separate Canvas with Top and Bottom (or two canvases?) with each overlay for top and bottom.
This lets you get the anchoring right, so when you’re on a tall phone, you get more playable area.
If you follow these steps you can easily prototype it out and prove you have it right for all shapes / sizes of screen.
Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:
1 Like