How To Design For Android Devices

How To Design For Android Devices

This will be part a series as I’m still in the middle of learning and updating my processes for Android. I used to not pay much attention to their guidelines because I considered them inconsistent and unactractive at the time, but I believe that now things have changed. I’m starting to see a pattern. That’s a good thing when it comes to a platform’s maturity.

The Back Button

For the longest time, the back button was never part of the user interface because of the hardware equivalent. It has changed since. It’s a pretty popular use now to include the back arrow next to the App’s logo when you browse sub-level content. The user interface’s back button (they call it “up button”) acts slightly differently than the hardware’s back button. While the up button goes up one level in your application only, the back button can go back to any previous application and content.

Resolutions

All the resolutions on Android are pretty confusing, i.e. we have xhdpi (2x), hdpi (1.5x) and mdpi (1x). They sound extremely technical. When I first started almost a year ago, the engineers couldn’t even explain to me what the ratio were for each of those. I had to figure it out by asking a lot of questions. The resolutions you should design in are 720×1280, 540×960 and 360×640. Make sure to include hardware buttons and the status bar on your design for high-fidelity mockups.

Starter Kit

Jeremy Sallée, designer at Telly, made a very helpful visual document that shows how the 3 resolutions differ. Also, you should head to the Android Action Bar Style Generator for a starter kit in a default theme. It lets you customize some basic settings such as colors and styles and you will get a zip file with all the assets all prepared for you in all 3 resolutions. The best way to learn is by experimenting with a real demo.

9-slice Scaling

Android has a peculiar way of managing graphical assets that is much different from how CSS does it. 9-slicing allows you to specify which area of the asset you want stretched and which area you want the content to be bounded by. The rest, such as rounded corners, can remain intact even if you resize the asset. On the asset, you have to draw these 1px black lines:

• Top: this area will stretch horizontally.
• Left: this area will stretch vertically.
• Right: this area will allow content vertically. This is where you set the padding for your content.
• Bottom: this area will allow content horizontally.

The Action Bar

Unlike the iPhone where the title usually goes in the middle of the header, on Android, the title is at the top left and next to the app’s logo. Tapping the logo usually leads to a side menu or to the last content you were on.

The title sometimes has a triangle arrow below it that indicates that you can navigate sub-level content. Just like on the Web, it is very common to see drop-down menus on Android.

Finally, if you respect their guidelines, all actions should be on the far top right. That includes functions like Refresh (because Pull to Refresh is extremely uncommon on Android), Search and the infamous Action button which is normally represented by 3 dots. The action button is used for more actions that couldn’t fit on the Action Bar.

Fonts

Fonts are unfortunately device-specific so better expect crappiness on some devices. Don’t get discouraged if you find yourself in a situation where you have to test your design on an old phone. There were worse days — remember IE6. The most popular font on Android is Droid Sans. It’s free to download. However, Roboto is gaining popularity since it’s present on newer devices.

Content Dimensions

In 2x, the minimum pixel dimension should be 28px for text, 96px for menus & header and 116px for the footer. It is only slightly bigger than on iOS (24px, 88px and 100px). We’re only talking about a ratio of 116% from Android to iOS.

Preview Your Design On Your Android Phone

Roman Nurik from Google released a pretty useful tool called Android Design Preview which allows you to preview your desktop view or design image to your Android device in pixel-perfection glory. Don’t even try Dropbox, the image get compressed badly.

Tip: on the Mac, you have to make sure that you allow applications downloaded outside the App Store by going to Security and Privacy in your System Preferences.

Another tip: the only way to preview your design is by connecting with your USB cable to the device and click “Install App”. This took me a while to figure out because I took for granted that they had an Android app on the Play store and that I would be able to preview using WiFi. Nope.

An Evolving Process

I still have to learn about tablet-friendly guidelines and a few other key techniques which I will write about as I go through them. If you have advices or resources, please feel free to share in the comments or by writing to me on Twitter.