In this article we will go through some very basic design topics for the Android platform. Aside from the documentation provided by Google, there are very few resources that provide a high-level view of designing Android mobile apps. This article will make it easy to understand the nuances of Android user interface design.

I have to admit this has been a bear of an article to write. Why?

Android Standard UI Elements Are...Not Sexy

I’ve been trying to find a way to avoid this topic. Really, I have. But it needs to be discussed.

As a designer we’re all presented with a scope of work when we begin a project, and sometimes that includes existing design elements and visuals. Such is the case with the standard Android UI design elements:

Designing for Android can sometimes feel like putting lipstick on a pig, but it can be done in a way that is elegant.

Do You Design For The Device Or The Brand?

Knowing what we know about the Android UI and its design elements, it is hard to resist the notion of re-using an iPhone UI “for the sake of the brand”. But is that the right decision? I think the answer is two-fold.

It Works For Games

Here are screenshots from the IconFactory’s game, Frenzic. Like most games, it breaks out of the standard UI for both iPhone and Android, so it makes sense to reuse the same UI template for both platforms:

It Does NOT Work For Utilities

You have to find a way to balance your brand, and the look of the Platform. Dropbox is a great example of an app that maintains their brand integrity and native platform UI controls in an elegant manner:

How To Design For Multiple Screen Sizes

The great thing about Android is that it runs on a bunch of devices. The bad thing about Android is that it runs on a bunch of devices. But get ready designers: this factor is only going to get better/worse as more and more devices pop up on the market.

The thing to remember when you design for Android is to NOT use fixed-width layouts. If you come from a web design background, think in terms of “fluid layouts”. Layouts that will stretch based on the width of the browser, or in this case, the screen.

The “Density Independent Pixel”

Google has a great doc about how to support multiple screen sizes here. Don’t freak out when you start reading about things like the “density independent pixel”. All this means is that the conversion between pixels and DP will not be consistent across all screen sizes and resolutions. And what that means is if you create a graphic that looks great on a 480x800 screen, it will not size properly for a 240x400 screen.

Creating Three Sets of Graphics

Because of the aforementioned screen resolution/size issue, Android recommends creating three sets of graphics for:

• Hi Density Screens
• Medium Density Screens
• Low Density Screens

This will keep your design from getting crunked up when it’s displayed on various screen sizes.

The grid below shows the various screen sizes and resolutions you use for your Photoshop files:

I know it’s a lot. But if you’re creating your design using vector shape layers, the re-sizing process shouldn’t be too painful. The key is to design for the smallest screen first, and then size up for larger screens.

Do You Want to Hear More?

This is my first Android specific post, and I’d like to know if this is a topic of interest to you.

Are you interested in reading more Android design content?customer surveys

Other Resources

User Experience Tips for Android Apps