Resizing a UI element (Best practice)

Started by
11 comments, last by dougbinks 11 years, 5 months ago
Just a note on 9-patch, even though stretching of the borders is the simplest, and looks good in many (most?) situations, you can also chose to repeat or clip them.
Might be a better idea if the borders have lots of intricate detail.
Can look a bit weird for the user if windows are dynamically resizable by the user though.

UIs generally does not play nice when scaled down, so if your problem is the low end of the resolutions, you might have to think about having different, lower res, decorations at lower resolution. (or just accept it doesn't look "perfect" and realize not many of your customers will have that experience anyhow, so maybe not so important to spend time on)

If the UI is very complicated, you might need different layout too, but as long as the screen has roughly the same apect ratio (doesn have portrait mode or such like mobile devices), you probably can create a layout that works for all.
Advertisement
Sounds like what we concluded to. There are certain things you must learn to accept and having slightly less appealing UI on ultra low end seems like one of them. Thanks for the advice and help.
One potential for low performance systems is to render the UI at a high resolution (res of the monitor) and the 3D scene at another resolution. This doesn't solve the issue completely as some systems ship with pretty low resolutions these days, but it can help. There's an example of this in the Dynamic Resolution Rendering sample I wrote, and though it's in C++ the basic principle should be easy enough to port.

You may also want to check out Signed Distance Fields (nice video here, original article here). Compositing several distance fields together with effects like gradients could give a fairly wide range of scalability at low runtime cost.

This topic is closed to new replies.

Advertisement