Android: So Many Device Sizes and Resolutions

Being an open-source operating system, Android enables smartphone manufacturers to create devices for all sorts of people and purposes. This is fabulous, since it opens up a world of smart handheld computing to nearly all demographics and socioeconomic groups. However, for an Android app developer—especially one who is accustomed to iOS development already—this “openness” causes a bit of a quagmire.

You see, in iOS, there are just two screen sizes and three resolutions. We know what they are when we start designing, and we understand how many sets of graphics and layouts we need to produce. In addition, there is superior documentation for iOS with excellent and consistent tools.

With Android, however, there is some essentially limitless number of screen sizes and resolution. Documentation is often hard to find and decipher. How do we know how many sets of graphics to produce, and what sizes they should be?

Android gives you four size categories to choose from. They are:
Small (2-3 inches)
Normal (3-5 inches)
Large (4-7 inches)
XLarge (7-10 inches)

…and four resolution categories:
ldpi (100-120 dpi)
mdpi (120-160 dpi)
hdpi (160-240 dpi)
xhdpi (240-320 dpi)

And the kicker is, there are multiple aspect ratios as well. So, when approaching an Android project from the design perspective, you need to design a screen that is “stretchable” vertically without losing resolution. Where iOS screens are often built to fit the entire screen vertically with the ubiquitous “UITabBar” along the bottom, Android screens should ideally be built with tabs on top in order to facilitate a screen of unknown height.

The vertical screen “UITabBar” problem is especially gnarly when a developer is trying to “port” an existing iPhone app to Android. So, the main advice here is…
Don’t think you can use your iPhone design for your Android app!
Make two separate graphical AND TECHNICAL designs, each accommodating its particular operating system. This way, the developers will be able to keep on schedule and the end result will more likely be a friendlier experience for more users.

In your quest for Android goodness, here are a few basic principles to keep in mind when designing layouts and producing graphics for Android:

• Design the wireframes with Android-specific UI elements (i.e., don’t use UITabBar or navigation bars with back buttons!)
• Get educated on menus and dialogs and choose wisely. There are Options Menus, Context Menus, and Dialogs, each of which has no true analog in the world of iOS.
• Make NinePatch graphics. This is a method of splitting up a graphic so it can be stretched horizontally or vertically without mangling the aspect ratio of the central portion of the image. There is a tool called draw9patch, part of the Android toolset, which helps to create these graphics.
• Design Android wireframes in various sizes to simulate the devices you most want to support.

Of course, these are just a few of the many things you will need to keep in mind in order for your Android project to be successful. I found this very useful blog post on Android design guidelines and advice that you may want to check out.  In this post, the author provides links to a PDF with some Android design guidelines used by his organization, which I found very useful.

Finally, you can always consult the official Android documentation outlining the technical details of handling multiple screen sizes and resolutions.