Universal Builds are a feature I’m really excited about in the latest version of Corona SDK. There are some great possibilities that you can take advantage of in your apps with Universal Builds in Corona SDK.
Corona SDK can do some amazing things with dynamic content scaling and dynamic image resolution to make sure your graphics look sharp on hi-res screens. What I’d like to add is that you can have dynamic layouts on different devices as well.
Where I Last Left Off
A while back I posted a tutorial on the blog, “Create scrolling list views with text and graphics in Corona”.
Then I posted an update to show how easy it would be to modify so that the same code that you used for your scrolling list on the iPhone would also run on an iPad as a split view (scrolling list on the left, details on the right.)
But before Universal Builds you had to build and distribute two separate apps for the iPhone and iPad. Now you can build once and your users choose which device to put it on.
Smart(er) Configuration Options
One of the keys to getting this to work on both devices, from the same binary, is to add an if-else statement to the config.lua file. Learn more about configuration options.
In my old code, I asked the developer to comment out and uncomment certain lines in their config and build settings files to prevent auto-scaling on the iPad. However, with a Universal Binary you don’t have control over where the user is installing it–on an iPhone or an iPad–so commenting out and uncommenting certain lines won’t work. This is where if-else takes over. In your config.lua file detect the device before passing the config options:
if system.getInfo("platformName") == "Android" then
width = 320,
height = 480,
scale = "letterbox"
elseif system.getInfo("model") ~= "iPad" then
width = 320,
height = 480,
scale = "zoomEven"
In the first part of the if statement, the code checks to see if we’re on an Android device because ‘letterbox’ looks better than zoomEven. The second part checks to see if we’re *not* on an iPad, then it uses ‘zoomEven’, which is good for iPhone 3 and iPhone 4 (retina display). So in the case that we’re on an iPad, no scaling takes place.
Handle Orientation Changes
The other key to handling dynamic layout is detecting orientation changes. I modified the sample code by adding a few lines to adjust the layout and position of objects on the screen when an orientation change is detected.
And here’s a video of my universal binary in action. You can see that it has two different layouts and behaviors depending on the device:
One thing that I’ll point out I’m missing in the video is an Android device. The same code will also run on Android but you’ll have to build that separately as .apk file.