The staggering variety among mobile devices (particularly in the Android world) pose a challenge for the developer: how to properly handle all those screen sizes?

One approach is to just pick a single “native” resolution and simply stretch it to fit whatever the device happens to look like. This often doesn’t look very nice and can turn circles into ovals, squares into rectangles, etc.

Another approach is to “letterbox” your native resolution onto the device. So if the device is “taller” than your native resolution, you’d fit width and add letterboxed bars at top and bottom. (or vice versa, for landscape orientation) You can even fill that area with something other than black, and try to squeeze some UI elements onto it. But it’s usually pretty obvious when an app has “less used” edges resulting from letterboxing.

Another approach is to adapt your native resolution on-the-fly to match the device’s aspect ratio. This is a bit more work, and requires more planning up front to make sure all assets will “fit together” the way they’ll need to, but I think it gives the most pleasing results.

For Eggheadz Bounce’s title screen, I took a sort of hybrid approach. It’s working with a dynamic content size, scaled to match the device, and I allow the background to stretch-to-fill, but keep all UI elements at their native scale.

Everything is then positioned in relative coordinates. The most obvious example is the central row of buttons that maintain their relative position against the stretched background.