Absolute interface element sizing across devices / platforms - How do you do it?

Audio and Graphics
#1

Age old question… How do you ensure various interface elements stay the size you intend them to be across devices / platforms and not get scaled up & down by Corona SDK? Its too easy to let Corona do all the scaling but the resulting apps don’t look native at all when you design on a phone and run on a tablet for example. 

How do you ensure the NavBar is 44 pts precisely on iPhone 4, 5 and iPad. Then again how do you ensure the navbar is the same size in actual millimeters on an iPad mini vs iPad Air… I spent a lot of time last year chasing this dream but I’m not happy with the results I’m getting and wanted to see if there are others like me, who yearn for precise UI element sizing that matches what native apps do.

What I’m referring to is summed nicely in the image below… 

bothPhones.jpg

Thanks for any ideas & code you might be willing to share. 

#2

In the example above, the devices are the same scale.  Both are going to use 50 point high tab bars, the navbar is 44 points.  If you use the same basic scale for iPads (360x480), the bars will still be the same number of points.

The iPad Mini and the iPad 1/2 have the same size screen in pixels.  A 44 point navbar will be a different number of mm.  Every native app will be apparently a little smaller on the iPad mini than on the larger screen iPads.   Event the retina iPads are going to be the same relative height.

Now what you can do if you want these items to be about the same size in mm/inches between an iPhone and an iPad, then you have to create a different sized content area or detect the type of device and create your navBar and tabBar’s with different values.  FWIW, I looked at the Clock app on my iPhone 5 and iPad 4 and both the navBar and tabBar are about 50-60% bigger visually on the iPad than the iPhone. 

In the original version of the Ultimate Config.lua, it detected the device and let you set independant sizes for the device.

#3

Hi Rob, thanks for your guidance. The Apple devices are not that big a deal in this regard since there are only a handful of them with small variations to deal with. Where it goes haywire is the Android world. Any suggestions there?

I use the following to detect screen size in physical terms and adapt my element sizing but unfortunately not all manufacturers burn the size data correctly into their devices. 

 local androidDispWidthInInches = system.getInfo( "androidDisplayWidthInInches" ) or 0 local androidDispHeightInInches = system.getInfo( "androidDisplayHeightInInches" ) or 0 local androidDispXDpi = system.getInfo( "androidDisplayXDpi" ) or 0 local androidDispYDpi = system.getInfo( "androidDisplayYDpi" ) or 0

Yup. The Clock app is not uniform in its UI between the iPhone and iPad anyways. I think its alright to have slightly taller / wider elements on the iPad taking into consideration the available real estate but when we leave it to Corona SDK to provide a direct scale up it gets to be too big and hence my post on this topic. 

#4

What you’re doing on Android is about the best you can.

#5

In the example above, the devices are the same scale.  Both are going to use 50 point high tab bars, the navbar is 44 points.  If you use the same basic scale for iPads (360x480), the bars will still be the same number of points.

The iPad Mini and the iPad 1/2 have the same size screen in pixels.  A 44 point navbar will be a different number of mm.  Every native app will be apparently a little smaller on the iPad mini than on the larger screen iPads.   Event the retina iPads are going to be the same relative height.

Now what you can do if you want these items to be about the same size in mm/inches between an iPhone and an iPad, then you have to create a different sized content area or detect the type of device and create your navBar and tabBar’s with different values.  FWIW, I looked at the Clock app on my iPhone 5 and iPad 4 and both the navBar and tabBar are about 50-60% bigger visually on the iPad than the iPhone. 

In the original version of the Ultimate Config.lua, it detected the device and let you set independant sizes for the device.

#6

Hi Rob, thanks for your guidance. The Apple devices are not that big a deal in this regard since there are only a handful of them with small variations to deal with. Where it goes haywire is the Android world. Any suggestions there?

I use the following to detect screen size in physical terms and adapt my element sizing but unfortunately not all manufacturers burn the size data correctly into their devices. 

 local androidDispWidthInInches = system.getInfo( "androidDisplayWidthInInches" ) or 0 local androidDispHeightInInches = system.getInfo( "androidDisplayHeightInInches" ) or 0 local androidDispXDpi = system.getInfo( "androidDisplayXDpi" ) or 0 local androidDispYDpi = system.getInfo( "androidDisplayYDpi" ) or 0

Yup. The Clock app is not uniform in its UI between the iPhone and iPad anyways. I think its alright to have slightly taller / wider elements on the iPad taking into consideration the available real estate but when we leave it to Corona SDK to provide a direct scale up it gets to be too big and hence my post on this topic. 

#7

What you’re doing on Android is about the best you can.