Question

I have a client who wants me to build an Android version for their existing iPhone app. The design of the iPhone doesn’t use any native iPhone elements. It’s basically some sort of grid with containing images, buttons, text, etc. Of course it was easy to make the iPhone app because of the fixed pixels widths/heights. The basic grid that defines a screen is loaded via a XIB file, and I load the custom buttons in the right containers in the grid by specifying the exact coordinates.

Then comes Android…

Our client wants to target 3 specific tablets (1024×600). They have given us designs for a ~600×980 portrait version of the app. It is not recommended to use AbsoluteLayout in Android. What is the easiest way to make sure that I can scale it on different devices but that it will look like the given design on the 3 target tablets.

One idea I had (which I’m not sure about whether I can implement it) was:

• Get screen width in pixels and height
• Based on width/height ratio of the design, pad with bars on top/bottom or left/right
• Still do an AbsoluteLayout based on this information

I’d rather not do it this way because it sounds involved and counter to the Android way of doing things. Another issue that is created by scaling is the following. There is a bar of buttons that have a lines separating them. These lines are 4 pixels wide. Obviously, when you start scaling, this is going to mess this up completely. I can’t seem to find much information about this s

Answer 1

You probably want to start here:

http://developer.android.com/guide/practices/screens_support.html

But quick points are probably

• Do not use an absolute layout. Your life will become terrible
• Handle sizes in density independent pixels so they will scale properly on different devices
• Use ninepatch images so that when images stretch they will stretch in the proper regions maintaining your 2px borders ect.
• Take advantage of the different resource folders for images at different densities (drawable-mdpi vs drawable-hdpi) and layouts at different sizes (layout-small vs layout-large). The latter will allow you to have separate layouts for your tablet devices.

Best of luck 🙂