Best scalable UI solution for most android devices

[blikoor]

Is your feature request related to a problem? Please describe. Scaling to fit the whole scene, will result in possible black borders on different aspect ratios.

Describe the solution you'd like I want the best possible scalable UI appropriate for the project. The UI elements should keep their relative positions and scale or stretch appropriately.

Describe alternatives you've considered

1. The unused space (black borders), can be used for a larger background image to display additional content that is outside of the logical scene and thus only visible on devices that have a different aspect ratio.

2. Change project setting to Stretch Mode: 'viewport' and Stretch Aspect: 'expand'. Anchor the UI elements in position, relative to the parent node.

• Results: The UI elements keep their position relative to the parent node, but can overlap when scaled down. Texture stretching can occur when scaled up, using a NinePatchRect instead of a TextureRect solve this issue.

• Error(s): _update_root_rect: Font oversampling does not work in 'Viewport' stretch mode, only '2D'. <C++ Source> scene/main/scene_tree.cpp:1236 @ _update_root_rect()

3. Use the previous project settings. Place each top UI element in a GridContainer, all GridContainers inside a HBoxContainer, and anchor the HBoxContainer relative to the parent node.

• Results: The top UI elements keep together, the container keep its position relative to the parent node. However, the HBoxContainer end up being lager than the logical scene width of 576 px and needs to be scaled, but UI elements are undersized.

• Error(s): _update_root_rect: Font oversampling does not work in 'Viewport' stretch mode, only '2D'. <C++ Source> scene/main/scene_tree.cpp:1236 @ _update_root_rect()