Mobile Design

How to Get Started in Android App Design


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

Related Posts
  • Game Development
    Write Once, Publish Everywhere With HaxePunk: Cross-Platform TipsHaxe article 2 main image resized
    Tips on how to make your games work well on multiple types of devices. We'll talk about screen sizes and resolutions, input types, interface layouts, and tips for app store submissions.Read More…
  • Game Development
    Game Design
    Quick Tip: What Is the Best Screen Resolution for Your Game?Screen resolution 400px
    Chosing the optimal resolution for a game from the start of development can reduce headaches with porting later on. In this Quick Tip, I'll help you choose the best screen resolution for your game.Read More…
  • Code
    What Makes Mobile Design Unique?Mobile unique icon2x
    Are you getting started with mobile design? Any designer who's had the opportunity to design for mobile devices as well as desktop computers knows that mobile design is a one of a kind discipline. You'll find challenges unique for mobile. In this introductory article, I'd like to take a look at some of the attributes that make mobile unique. It's no secret that thinking about a product's design makes for a better product. This doesn't solely relate to aesthetics as design also influences how a product's functionality and how the user interacts with it. Design choices have a distinct influence on usability and user experience. When you start out as a mobile designer or developer, it's your responsibility to make the product not only work for you, but also for its target audience.Read More…
  • Code
    Android First… Even When It's Second97373 preview image@2x
    Designing for the Android platform isn't easy, especially if you're used to designing for iOS. Is porting your iOS designs to Android a viable option? It's not, and I will tell you why.Read More…
  • Code
    Android 4.4 KitKat: What's NewAe2b1 preview image@2x
    Google released its latest version of Android on October 31, 2013. The new release, version 4.4, is nicknamed KitKat. The release came as a surprise to many as Key Lime Pie and 5.0 had been linked to this update for quite some time. KitKat, however, doesn't disappoint as it's packed with features and updates. In this article, I'll give you an overview overview of what's new in KitKat.Read More…
  • Code
    Android SDK
    Android SDK: App ResourcesAndroid preview@2x
    We are learning how to develop Android apps in this series. So far, we've looked at the structure of an Android app and explored user interfaces. In this tutorial, we will learn to work with the project resources.Read More…