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 480×800 screen, it will not size properly for a 240×400 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
A Special Offer from Jen Gordon @Tapptics
Send me an email and i’ll send you a 20% off coupon for a years worth of downloads on Tapptics!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jen Gordon
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Mobiletuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I agree that “It Does NOT Work For Utilities”. We made the mistake with Bluppr Postcards. We spent a lot of effort in our UI design. But, at the same time we launched Bluppr Postcards, Postdroid (an app with the same concept but no fancy layout) launched with much better download results.
Wow Ben thanks for the comment – I’d love to chat with you about the feedback you got on the Android design! I’m at http://www.twitter.com/itsjengordon
Also, thanks everyone for taking the poll, so far:
49 interested in learning more about Android design
1 not interested
I’ll definitely be exploring the topic further!
In the meantime, any of your devs/designers working on Android apps please share your experiences or designs with me via Twitter – tks! jen
Looking forward to more in this series. I hope the interest is there. I have been looking to get back into mobile development (my last effort was pre-Android), but honestly, I was wondering “How exactly do I get started?”
Sure, there are tutorials for writing “Hello World”, but those types of tutorials don’t make you WANT to develop. I feel this series could change that.
@djmac You’re right about having some inspiration to design/dev on Android. I hope to find more apps I can use as example of incredible design and functionality on Android to get us all excited about the platform.
Android devs let me know what you’re working on! http://www.twitter.com/itsjengordon
I’d love to see more Android articles that are focused on design rather than development. There’s a big lack of good resources in that area, which leads to lots of people making really bad UI’s. We need to have more help considering Google isn’t going to reject apps which look rubbish and haven’t been designed with any sort of user in mind.
can’t agree you more.
Nice tutorial, I personally am a designer, I want to venture into app creation for the android platform but was worried about this EXACT problem. Thankyou for clearing it up, it’s greatly appreciated, now to learn the appropriate coding and what have you…..yay(insert sarcasm font :D). Cheers
I agree with you about the UI not being as sexy as one would like it to be although I feel it is dependent on the designer themselves and knowing the UI thoroughly enough to be able to overcome these obstacles. The image you have referenced is based on a very old android device and is only supported by less than 6% of the common Android user. Many of the manufactures of this device have done a good job (Such as HTC) at skinning the standard UI controls to enhance the visual display.
As designers we should make sure we have read any supported documentation such as a HIG (Human Interface Guideline) to better understand what we are designing for. In the case of different displays and how graphics are handled one could fall back on the idea of using nine patch drawable graphics allowing the designer to create one set of independent objects and inform the developer as to the scalable areas within the object itself.
So far I have only designed 2 android apps as I primarily design for iPhone and iPad. I was a little overwhelmed due to my lack of device knowledge but have found that if you want to create a great design for the android, a little bit of research on test devices and a strong desire to create a great user experience will achieve great results.
Superb article jen. I really liked it.
Great article. Give us more like this. I’m starting to develop in Android so this is very useful. :)
Excuse me i am looking to get into android app design, i just dont know how to go about it, i dont know the first thing about programming and creating one and i was looking for some helpful hints and tips, but it seems that the internet is severely lacking in that area. Please Email me at astabois@live.com. I would use one of the many websites to just throw one together but chances are they would be cheap and not worth it, i would like to make something in my view not from a pre created design. please email me and thank you.
Nice tut, keep going on with Android lessons!
Excelente articulo :D, espero ver más sobre el diseño en Android!!!
hi guys, i’m busy designing an android app.
I already set -up the design in a screen size of 320 px width and 480 px height and a resolution of 72 px in photoshop.
Every element is builded up with vectors
but after reading this article i understand that i need to resize my start document and make 3 documents with these specifications:
240px x 400px with a resolution of 120dpi
320px x 480px with a resolution of 160dpi
480px x 800px with a resolution of 240dpi
and resize everything including the fonts because theres no aspect ratio between these 3 specifications.
am i right? or is there a quicker way to convert my document into 3 documents with these specifications.
Stephan, did you get any answers on this? I am wondering about just the same as you did. Would be great to hear what you learnt.
Many thanks,
A
There is a great article which explains this topic: http://coding.smashingmagazine.com/2011/06/30/designing-for-android/. It turns out that we shouldn’t change the PPI of the document and just scale the image size.
Hello,
This has been a nice guide for the android app design. I am a designer by profession and make design for android app. I have worked on the 320px x 480px resolution design.
Now have to make a design as per 480px x 800px resolution. I am a bit confused as how the design could be displayed on the android phone of such a resolution.
Please post related to this issue.
Thanks
Good start but needs much more substance. Let’s face it, it’s either Android or iPhone. And at the end of the day you are going to have to create an app for both. I found this article about iPhone design:
http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/introduction-to-iphone-design/
I hope you include the same design/dev info about android as this article does about iPhone. Good Luck.
I am not an app designer, nor do I have any web design background.
However I do have an idea.
I would love some insight and possible direction.
Anybody interested?!?
xtattooer@gmail.com
Happy to looking more tuts about andriod design from GUI itself and need more clear steps.
Thanks for your tuts.. :)
QR code is a great invention people made. I’m making mobile apps currently and find it really cool to implement QR codes into them. I’m amazed at QR code coupons Snappii app builder allows to create. They are really helpful for small businesses.
The name of the game has changed with ice cream sandwich