Designing for Android
Let’s face it, as designers, the Android platform is terrifying. Android is a mixed bag of operating system versions, frozen dessert names, and pixel densities — something that designers, don’t want to worry about. The goal of this article is to help you make sense of the Android ecosystem, and start thinking about designing across several screen sizes and resolutions. We’ll provide you with a few tools, helpful links, and do our best to get you started on this platform; it’s the stuff we wish someone had explained to us earlier on. Once understood, there’s an endless sea of users just waiting to get their hands on the next great thing, your app, maybe…
01 First things first, get a device in your hands
Nothing will get this process running quicker and more efficiently than having a device in your hands. Use it, try it out, swipe around, type stuff in, download an app. Do your best to accomplish an everyday smartphone task. To choose a device there are few things to consider, we’ll give you our thoughts on devices as well. First, Samsung, HTC and Motorola consume well over half of the total market share for Android, and HTC and Motorola specifically run a customized theme of, what we refer to as “pure Android” style. We suggest starting with a Nexus model as of 2013. Nexus is currently produced by Google though LG, previously Samsung and HTC, resulting in what we call a “pure Android” experience. Other carriers and manufacturers pack the phone with a custom Android theme, and various applications that you might not need, Nexus does not. One other bonus to Nexus, is that you can stay up to date with software earlier as Nexus get’s software updates before the other manufactures.
Secondly, we recommend getting as many devices in your hands as you can. It’s important to understand how different the experience can be across different carriers, screen sizes, operating systems, and pixel densities. Try out the HTX one, Galaxy s3 and the Motorola Droid 4.
02 Understanding Screen Size & DPI
Understanding the complexities of varying screen sizes, resolutions, pixel densities, etc. is paramount in understanding where to start with Android. There are three terms to address separately when designing for Android, they all seem like they could be synonyms, but they aren’t.
Resolution: The total number of physical pixels on a screen at one time.
Screen Density: The number of pixels within a physical area of the screen. When we talk of this, we are talking about DPI, or dots per inch. There are 4 levels of screen density within Android. lDPI, mDPI, hDPI, and xhDPI. If a graphic scales across all 4 of these levels, some manual graphic editing may be warranted, while not completely necessary. For example, when you put your thumb on the screen, how many pixels are you touching? It varies between devices.
*Density-Independent Pixels (DP): The goal of DP is to make that beautiful button you designed looks crisp and is the same physical size on all Android devices. Your thumb doesn’t change dimensions across devices so neither should your button.
How do we make sure your assets look sharp and measure the same physical dimension? It’s pretty simple actually. Create copies of assets at various pixel dimensions to match four key sizes: lDPI, mDPI, hDPI, xhDPI
Keep in mind that this red icon will appear same physical size on screen. The difference is that each ‘Screen Density’ is packing more pixels into the same amount of space. The higher the density, the clearer your screen and graphics will appear. For example: a 100dp graphic would be 100px x100px at mDPI. The same 100dp graphic would have to be blown up 200px x 200px on an xhDPI screen. If you don’t provide the xhDPI asset, your icon will be blurry.
Designers are responsible for providing pixel assets across the entire. This will keep your design clear and crisp. Be aware that screen resolution and screen sizes are in constant flux, so you may need to create additional assets.
When setting up a design document, or starting out with wireframes, It’s recommended by us at Ratio and Google that you start from the middle. Begin working at an average 2.5-4.0” screen size, at MDPI screen density. Let your app scale up and down from there. Start with a resolution of 480 x 800px. Android has posed a section in their **‘developer guidelines called Supporting Multiple Screen sizes. While this has a lot to do with development, there are some nice graphs to help explain this further.
03 Unique Android Features
This is a short list of gestures, functions, features, and UI normalities that we find to be special to the Android platform.
This mode allows the user to enter a multi-select state. A contextual ‘Action Bar’ is usually present at the same time.
Also known as ‘Companion Widgets’, these small app extensions live on your home screen and provide access to one important feature of the application. This allows users to perform tasks without diving fully into the application. This feature is unique to Android, and does not exist in iOS or Windows Phone OS.
Up vs Back
At a quick glance, you might find yourself confused to see what appears to be two back buttons. They are different, I assure you. In the top left of an app, is the ‘Up’ button. This moves you up in the navigational hierarchy of app you are currently in. At the bottom is our the ‘Back’ button. This is a global backbutton for the device itself. Using the ‘Back’ button maintains the same functionality as the ‘Up’ button, until you go so far as to leave the application you were in. The ‘Back’ button continues taking you back through the history of the phone itself, across applications even. Pretty sweet huh? We seem to like it.
The action bar is what lives at the top of each app. It contains various features that are necessary to providing users with the level of intractability they expect. Link: http://developer.android.com/design/patterns/actionbar.html
When designing for Android, it’s important to keep the device themes in mind. As mentioned before, different manufacturers produce a different visual theme for Android for their devices specifically. You can set your app up to stay consistent across varying themes, here is a helpful link to understanding themes. http://developer.android.com/design/style/themes.html
Android has some standard fonts. Use Roboto as the standard font when designing in Android. This does not mean this is the only typeface you can use, you don’t even have to use it, but now you know what one you are seeing all over the OS. Here is a helpful link explaining more details around using Roboto, and scaling type appropriately. http://developer.android.com/design/style/typography.html
We hope that these notes, links, and opinions will help you get your head wrapped around the idea of designing for Android. There is quite a lot of content we left out of this post, so make sure to check out the official Android Developers page and click on ‘Design’. Hope you enjoyed this read, and happy designing!
* Official Design Guide: http://developer.android.com/design/index.html
** DP / PX Calculator: http://labs.skinkers.com/content/android_dp_px_calculator/