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:

[lua]
— config.lua

if system.getInfo(“platformName”) == “Android” then
application =
{
content =
{
–zoom
width = 320,
height = 480,
scale = “letterbox”
},
}
elseif system.getInfo(“model”) ~= “iPad” then

application =
{
content =
{
–zoom
width = 320,
height = 480,
scale = “zoomEven”
},
}
end
[/lua]

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.

  1. could you please let us know, how to start with corona, is there full tutorial,

    because the sample codes that come with corona, is hard to understand everything, also reference file, is hard to understand it,

  2. Thank you, this is great! I noticed one issue on the Corona Simulator, running this in iPad Horizontal mode it doesn’t scroll the list all the way down, it seems to act as though it were in Portrait mode and the bottom parts of the list were showing even though they are not. I noticed on your video on the actual iPad it wasn’t doing this and did actually scroll all the way down.

    Do you know why it’s doing this? Is it a Corona Simulator issue?

    Thank you very much again.

  3. im trying to modify this to have a long string to appear in the details screen. but when i load it, the string doesnt load its just a black rectangle…can this code set only load short strings?

  4. Hi Gilbert, thanks for the iPad split view version. It really helped me jumpstart the business app I am currently building.

    I am a newbie at Lua, can you please help me how to pass the image at data[id].image to the right screen? I could pass the other texts in the data table, like title and subtitle. I am having difficulty trying to pass the filename whenever an item is clicked. I used display.newImage() and inserted it on detailScreen, but couldn’t get it to work.

    Any feedback is much appreciated.

    Thanks.

    Larrem

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>