Time for action – scaling display objects on multiple devices

In our Display Objects project, we left off displaying a background image and three similar display objects in the simulator. When running the project on different devices, the coordinates and resolution size were most compatible with the iPhone only. When building applications for multiple devices across iOS and Android platforms, we can configure it using a config.lua file that is compiled into the project and accessed at runtime. So let's get to it!

  1. In your text editor, create a new file and write out the following lines:
    application =
{
  content =
  {
    width = 320,
    height = 480,
    scale = "letterbox",
    xAlign = "left",
    yAlign = "top"
  },
}
  2. Save your script as config.lua in your Display Objects project folder.
  3. For Mac users, launch your application in Corona under the iPhone device. Once you have done so, under the Corona Simulator menu bar, go to Window | View As | iPhone 4. You will notice that the display objects fit perfectly on the screen and that there are no empty black spaces showing either.
  4. Windows users, launch your application in Corona under the Droid device. You will notice that all the content is scaled and aligned properly. Under the Corona Simulator menu bar, go to Window | View As | NexusOne. Observe the similarities in the content placement to that of the Droid. In the following screenshot, from left to right, you can see the iPhone 3GS, iPhone 4, Droid, and NexusOne:
    Time for action – scaling display objects on multiple devices

What just happened?

You have now learned a way to implement an easy configuration to display your content across a variety of devices on iOS and Android. Content scaling features are useful for multiscreen development. If you look in the config.lua file we created, width = 320 and height = 480. This is the resolution size that the content is originally authored for. In this case, it is the iPhone 3G. Since we used scale = "letterbox", it enabled the content to uniformly scale up as much as possible while still showing the entire content on the screen.

We also set xAlign = "left" and yAlign = "top". This fills in the empty black screen space that shows on the Droid specifically. The content scaling is at the center by default, so aligning the content to the left and top of the screen will take away the additional screen space.