Basically each screen is a different shape. We call this “aspect ratio”. You have a fixed “content area” in your config.lua of 384 x 640. This produces an aspect ratio of 1.6666667 to 1. (640/384). If you take the +20’s off of your background rectangle, you will see your actual content area relative to the device you are looking at in the simulator. The reason for it is that many of these screens are closer to a 16:9 format which is 1.7777778 to 1. Your actual content area is shorter than that.
Now you have it working in some skins, but not in others. The skin you show above is for a Motorola Droid, which is a 854 x 480 screen which is a 1.77917 to 1, a taller screen than say the Nexus 1 skin which is a 800 x 480 screen or 1.666667 to 1. Those extra 54 pixels have to be compensated for.
This is one of the major challenges in developing for Android. On iOS you only have 3 screen shapes to deal for: The 3.5" high phones (1.5:1), the 4" phones (16:9) and the iPads (4:3), so you can custom build a config.lua that fits those. But it’s nearly impossible with all the different Android devices to work this out. So along with some people in the community we came up with a smart config.lua that will auto-size the content area to fit. We call it the “Ultimate config.lua”. There are two tutorials on this that you need to read back to back. In the first one, we get things close (but it has very important concepts that you need more than the actual config.lua) then we have a second post after members in the community figured out the math to make it work on all devices. I would recommend you read both in order:
http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
http://www.coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/
Use the one presented in the second blog. This guarantees that 0, 0 will be the top left and display.contentWidth, display.contentHeight will be the bottom right.
This however introduces some positioning issues that some people struggle with. In it, you position elements relative to the sides or the center and understand that some things are going to move to fit the screen. For instance, if you say have a landscape app and you put a menu button in the top left, a settings button in the top right and the score in the top center. On a device like the Droid, the distance between the menu button and the settings button will be greater than on an iPad which is the squatter devices where they will be closer together.
So elements that need to stay near edges, you position using a fixed x, y distance for top or left bound objects. For things that need to be near the bottom or left, you use display.contentWidth and display.contentHeight minus some offset to position. Things that have to stay a fixed distance apart you position relative to the center of the device making sure they stay in bounds on the squattest device you plan to support. (something.x = display.contentCenterX - 100) to keep it 100 points from the center.
If this doesn’t work for you there is a mess of math you can do using contentWidth, height and actualContentWidth, height, and some other variables so that your defined content area is centered, but you may have to put things at negative values to reach one edge or numbers greater than display.contentWidth, height to get them to the edges since the defined content area will be shorter than the device.
