Use dynamic layouts in universal builds with Corona SDK

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

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:

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.

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

This entry has 7 replies

  1. tareq says:

    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. Gilbert says:

    If you’re just getting started with Corona, check out the Quick Start guide:

  3. Maziar says:

    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.

  4. acid66 says:

    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?

  5. Larrem says:

    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.



  6. How does this guide compare to using the following scheme: