Feb 16 2013

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.

android-heyzap

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.

android-telly

android-starter

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:

android-9slice

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.

android-actionbar

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.

android-refresh

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.

android-dots

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.

android-previewsettings

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.

android-preview

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.

0 tweets

168 Responses to “How To Design For Android Devices”

  1. @MiMaiMix says:

    How To Design For Android Devices by @MengTo: http://t.co/FNXsPc2K

  2. A light overview for designing for Android http://t.co/EjNaGnKg cc: @iconmaster (forgot to mention Design Preview to you)

  3. @davidklaw says:

    How To Design For Android Devices by @MengTo: http://t.co/Z94xLd2W

  4. @BuzzitMedia says:

    How To Design For Android Devices http://t.co/hwlFAMk8

  5. @rawdiggie says:

    How To Design For Android Devices by @MengTo: http://t.co/qrCF5Wqw

  6. The back button section isn’t quite correct.

    The button described is the up button, which takes the user up one level of the hierarchy. The back button is still the constant button at the bottom, taking the user back to whatever content they just viewed.

    Yea, it’s a little confusing and always the topic of conversation on Google+.

  7. How To Design For Android Devices by @MengTo: http://t.co/umdUGBXb cc/ @AndroWiiid

  8. @ericsnowden says:

    How To Design For Android Devices by @MengTo: http://t.co/9FunIpka

  9. @DayronElias says:

    How To Design For Android Devices http://t.co/BlOaLygc via @zite #teens #android #designers #apps #popular #2013 #news

  10. @maxrudberg says:

    This felt like a pretty good guide, you know, if you’re into this kinda stuff:

    “How To Design For Android Devices” http://t.co/OOEG4P0X

  11. @sjwnetwork says:

    [from khoiv] How To Design For Android Devices: http://t.co/6fEhJ3lN

  12. @DrMShaban says:

    How To Design For Android Devices by @MengTo: http://t.co/qKZKMt4V

  13. How To Design For Android Devices by @MengTo: http://t.co/0e5M5dNS

  14. @HazemKhaled says:

    How To Design For #Android Devices http://t.co/Zk3jyjkk via @drmshaban

  15. @Jibkid says:

    How To Design For Android Devices by @MengTo: http://t.co/kWIshGb2

  16. Matthias says:

    How does the developer find out, how much 114px is in Android’s sp?

  17. lalamin says:

    Nice post!
    You link got picked up by Hacker News

    http://news.ycombinator.com/item?id=5235746

  18. Reading: How To Design For Android Devices http://t.co/c4EdRId5

  19. Interesting and really clean information RT @Kampitsch: How to design for Android devices http://t.co/SrFAbsKs

  20. sazary says:

    you’re wrong about the placement of the app logo. if you take l19n in consideration, you may have to put it on top-right if the local language is right to left. this is what android itself practices in it’s latest version, 4.2.2. for example change your language to Farsi (or Persian) and check out settings ;)

  21. Archit Joshi says:

    As far as fonts themselves are concerned. It is possible to package your font choice with the application and use it in the application itself. You need not rely solely on the fonts that ship with the system.

    That being said, its still a pain in the ass actually applying the custom font to each thing with text on it.

    This article contains a section on how to do it:
    http://mobile.tutsplus.com/tutorials/android/customize-android-fonts/

  22. @ramisayar says:

    How to #design for #android devices. #dev http://t.co/ZvT9UeOQ

  23. Joakim says:

    You can in fact debug Android devices over TCP, but this feature can only be enabled by connecting the phone using USB, and will reset when the phone is rebooted.

    To enable, connect your USB cable and verify that the phone is detected using “adb devices”, and then run “adb tcpip 5555″. The ADB daemon on your device will restart in TCP mode. To connect to this phone, run “adb connect “. Once connected, all ADB actions are available.

    I use this to let my workstation access the device when I’m connected over Remote Desktop.

  24. @askhowto says:

    #How To Design For Android Devices http://t.co/JUokktcP via @pryourblog

  25. [...] sujets palpitants du jour sont : Tout ce que vous devez savoir sur les webdesigners; Comment designer les applications android; Méthode efficace pour vendre; et bien d’autres encore [...]

  26. @gorkemcetin says:

    Android cihazlar için genel tasarım kuralları http://t.co/2U4ZI7U1

  27. Huey Le says:

    Hi, I was wondering if anyone have created a starter kit for Sketch ? I’ve been using Sketch and really dig the user friendly of the app.

  28. Designing for android devices. http://t.co/1L5hsTRH

  29. Unfortunately, your chapter about resolutions is not very good advice :(

    For Android you should always design in density independent pixels and let developers worry about the actual pixels. That means that what designers do is design in real life size. The OS will automatically adapt to different densities (this is where the xhdpi, hdpi etc refer to). It can be a little bit confusing at start but once you find a good way to work with your devs the process can be very easy afterwards.

  30. @maxvazquez_ says:

    Good tips (UX, assets, fonts, …) for designing Android apps – most of them also directly applicable to web apps. http://t.co/7zlXMSGD

  31. How To Design For Android Devices by @MengTo: http://t.co/3sSUbz0P

  32. How To Design For Android Devices http://t.co/xntWOblO #UX #UI #design #webdesign awesome read

  33. @androigirl says:

    Great blog about Android design: http://t.co/9TDgmduF

  34. [...] will be vital for a company to have a proper layout for their app in the android market.  The blog http://blog.mengto.com/how-to-design-for-android-devices/ speaks towards all the main ideas that will help create the best android app [...]

  35. How To Design For Android Devices – http://t.co/WBftraRI #android #design #tutorial #tips

  36. A great read for those unfamiliar with the system — How To Design For Android Devices by @MengTo: http://t.co/5sRz9AZC

  37. @genueru says:

    После таких гайдов хочется порисовать для Android. http://t.co/odocc1d8

  38. How To Design For Android Devices #mobile http://t.co/XIJMZ1nI

  39. How To Design For Android Devices by @MengTo: http://t.co/hGGqmRCe

  40. lindo says:

    some important things missing from this article:
    - proper responsive design: designing for 3x fixed resolutions is NOT responsive design.
    - provided screen resolutions do not cover extremities, particularly small screen resolution 320×480. Sure you may not target that 1.7% of market, but its better you know you’re not. http://developer.android.com/about/dashboards/index.html
    - no mention of orientation changes, landscape vs. portrait. It’s bad practice to lock an app in portrait. Don’t be one of them. If you do it then its a clear sign you’re not designing responsively.
    - It’s ’9-patch’, it’s like 9-slicing only different. It’s worth knowing more about it and learning to use the tools to create them.

    The Android Assets Viewer online tool is designed to help designers get comfortable with the nuances of android size buckets and device resolutions, you’ll probably find it useful: http://www.cellebellum.net/AndroidAssetsViewer/

  41. @antonsten says:

    How To Design For Android Devices http://t.co/hZfeJK98

  42. @saertus says:

    How To Design For Android Devices by @MengTo: http://t.co/c9z5uZAU

  43. Kevin te Raa says:

    Because you shared the actionbar style generator, I thought you might want to add the program that is in the android toolkit for making 9patch drawables.

    In the Android SDK, in the tools folder, there is the draw9patch program. It gives you a visual representation of the 9patch that you are making and it lowers the amount of time you spend making them by not forcing you to compile or refresh the layouts.

    Usually making 9 patches would take a lot of time for me. But now it’s done in mere minutes without even booting up photoshop.

  44. “How To Design For Android Devices” http://t.co/mYI6nasb

  45. How To Design For Android Devices http://t.co/2eifIdYM #android #design

  46. Interessant – How To Design For Android Devices – http://t.co/ON8W09PS #mobile #native

  47. How To Design For Android Devices http://t.co/oE4moUzz

  48. [...] How To Design For Android Devices via Meng To [...]

  49. A Few #Tips On How To #Design For #Android Devices http://t.co/38jdXKaD

  50. @derekbender says:

    How To Design For Android Devices – http://t.co/bQnlKcfp

  51. @hising says:

    How To Design For Android Devices http://t.co/nq5ktqh3

  52. @barcaxavi says:

    How To Design For Android Devices http://t.co/CjFiDDMv

  53. [...] Bookmarked How To Design For Android Devices [...]

  54. @jBoive says:

    How To Design For Android Devices – http://t.co/Fk2YfriA

  55. Tim says:

    Nice article. By the way for Android Design Preview, you don’t need to change your security settings within OSX to run the app. Instead you can leave it on ‘Mac App Store and identified developers’ to remain secure, then to run a third party downloaded app you simply right click it and select open.
    This will warn you that it’s not from an identified developer but you can choose to continue and run the app.
    You only need to do this once per downloaded app and OSX will remember your decision (until you replace the .app with a newer version).

  56. “Just like on the Web, it is very common to see drop-down menus on Android.” Huh. Tips on How to Design for Android: http://t.co/U338PYLY

  57. @mikeebinum says:

    How to design for Android devices, interesting http://t.co/uTqzjaeQ cc @lynnagara

  58. Dave says:

    I am curious if the 116% ratio of Android to iOS might be applied to ALL/Most components? It would be great to know that all components are 116% wider/taller in Android. Your thoughts?

  59. @syahmi says:

    How To Design For Android Devices http://t.co/fNzOabaT

  60. How To Design For Android Devices http://t.co/CUChvXfF

  61. [...] 发表于 02/19/2013 由 craigleehi from Meng To http://blog.mengto.com/how-to-design-for-android-devices/ [...]

  62. @thiyagus15 says:

    How To Design For Android Devices by @MengTo: http://t.co/6LPfPntJ

  63. http://t.co/HQVfFkJq how to design for android #holoyolo

  64. @lorettahui says:

    Like: How to design for Android devices – http://t.co/X1NCjA6v

  65. @nor99 says:

    How To Design For Android Devices by @MengTo http://t.co/gGGKQuxS

  66. @palmut says:

    How To Design For Android Devices by @MengTo: http://t.co/ZNoXAfCC

  67. @codegent says:

    How To Design For Android Devices http://t.co/TGWb5wQv

  68. @V4Vad says:

    How To Design For Android Devices by @MengTo: http://t.co/9VtZkDBr

  69. @JUL14N says:

    This is a brilliant resource > How To Design For Android Devices by @MengTo: http://t.co/M6OV7nwG

  70. @uska says:

    How To Design For Android Devices http://t.co/7uK90xbS

  71. @sallar says:

    راهنمای طراحی برای دستگاه‌های اندرویدی
    http://t.co/9rrgPMxS

  72. @MadeByWater says:

    How To Design For Android Devices by @MengTo: http://t.co/jiNzkCvt

  73. @UXPhil says:

    How To Design For #Android Devices http://t.co/aQNy1OMF #ux #design #mobile

  74. @jamieclin says:

    How To Design For Android Devices http://t.co/XjT83OqV

  75. How To Design For Android Devices http://t.co/FoTKm5cy #design Me: overview on #Android specifics, resources, processes

  76. @uxfactory says:

    How To Design For Android Devices: http://t.co/Sc6IlyGA

  77. @uxfeeds says:

    How To Design For Android Devices: http://t.co/aBjFqIup #ux

  78. @9buttonskz says:

    How To Design For Android Devices by @MengTo: http://t.co/NcVk30my

  79. @mauriolg says:

    Nice to be reminded that there is #design life outside of #ios. #UI #android http://t.co/00MebaeE

  80. @mr_mcd says:

    How To Design For Android Devices http://t.co/bPlt2tgI

  81. How To Design For Android Devices – http://t.co/UHaUUCqX

  82. sumit kher says:

    This is very inspiring, as getting from the start & Having no real background in programming (aside from making some adventures on ZX-81 and MSX), this does sound like I could get started on developing something for my own Android based eBook reader and android app development training even this online course seems to be interesting http://www.wiziq.com/course/13599-professional-android-app-development-training-1-on-1-sessions. Has anyone tried any online courses so far. Please do provide a light on this also.

    Thankyou for all the info also.

  83. @marloooon says:

    How To Design For Android Devices by @MengTo: http://t.co/uD0LTJbJ

  84. @UTguru says:

    How To Design For Android Devices: http://t.co/Hd3a1UGQ #ux

  85. @cerasoli says:

    How To Design For Android Devices by @MengTo: http://t.co/KazKRa7w

  86. @Stammy says:

    @aten you need some 9-slice lovin’ http://t.co/YbaWCWZY

  87. @paulusch says:

    How To Design For Android Devices: http://t.co/4dy2iiSO

  88. @gustomela says:

    How To Design For Android Devices http://t.co/G1W2Czml

  89. alsal says:

    Hi, you mention that resolutions should be 720×1280, 540×960 and 360×640. but surely scaling down from 720px by 1.5 to HDPI would make the width of the screen 480px.

    Android Developers I have worked with in the past have all told me that 480×800 is the best way to design for HDPI size, not only because the width is correct in ratio, but also because that is the most typical screen resolution for HDPI devices.

    I was just wondering why you state these sizes for screens.

    (also worth noting: http://stackoverflow.com/questions/6166677/android-screen-size-hdpi-ldpi-mdpi)

  90. Jan says:

    Great idea, although there are some errors.

    The paragraph “resolution” feels wrong to me. You should not design for “pixels” in android. The only exception are the drawables (xhdpi, hdpi, etc..) you mentioned: you create those for the highest resolution (xhdpi) and then scale the created images down (afaik there are scripts that can do that automatically for you). I did not read all comments on this post but have seen that this paragraph got discussed before ;)

    Your part about the action bar is a bit confusing: if you follow the guidelines the actions can be in the upper right corner – but there’s one thing called split action bar. Look it up ;) also the up button is not a “in ui back”-button. The use of back (temporal, go back to last content) and up (go up one level in content) are different. Search for “navigation” in the design guide.

    Content dimensions: Don’t use pixel. See http://developer.android.com/design/style/metrics-grids.html for this section ;)

    One more thing: add links to the official guide – or other helpful sites. Would make things easier for you (less mistakes) and the reader (more infos) ;)

  91. [...] what the pros are using to test websites and mobile apps.    Whether you’ve been designing for Android for years or just starting out this is a great article about designing for Android.  Touches [...]

  92. [...] How to design for Android devices [...]

  93. [...] Meng to: How To Design For Android Devices [...]

  94. Talisman17 says:

    Great tips for Android design!
    I found something strange while using the Android Design Preview app. I love it but it seems like you can only use it when designing at 480×800 or similar aspect ratio. If you are working in xhdpi (720×1280 – not equivalent to 480×800) then the image won’t fit on the device, either the top or bottom will be cut off. I’m curious if you’ve come across this issue or if you have a work around for this?

  95. broderix says:

    I foggot about ldpi (low) – it’s 0.75 from mdpi. ant totaly it would be:
    ldpi – 0.75x – 36dp
    mdpi – 1x (baseline) – 48dp
    hdpi – 1.5x – 72dp
    xhdpi – 2x – 96dp

  96. [...] Les lignes de design pour Android, simplifiées et condensée. A lire, c’est pas long et ça permet de mieux saisir le fonctionnement des interfaces Android. [...]

  97. [...] 49% of mobile users use their phone with one hand, this means that almost 1 out of 2 users use the back button several times a day. That’s billions of awkward taps daily. It’s even worse with bigger phones because you would almost certainly have to use your 2 hands to reach the back button. I guess that could be one reason why Android has their hardware back button on the bottom left, but still, it’s not that great since the back button can differ from the “up” button. [...]

  98. [...] 49% of mobile users use their phone with one hand, this means that almost 1 out of 2 users use the back button several times a day. That’s billions of awkward taps daily. It’s even worse with bigger phones because you would almost certainly have to use your 2 hands to reach the back button. I guess that could be one reason why Android has their hardware back button on the bottom left, but still, it’s not that great since the back button can differ from the “up” button. [...]

  99. [...] month period, over 70 thousands unique visitors came to my blog seeking information about Sketch, Android design and Solving The Back Button. Many came back. Designers would ask me questions directly on Twitter, [...]

  100. [...] month period, over 70 thousand unique visitors came to my blog seeking information about Sketch, Android design and Solving The Back Button. Many came back. Designers would ask me questions directly on Twitter, [...]

  101. @adoreau says:

    How To Design For Android Devices : http://t.co/1PssaTuiR8 Thx for this nice article @MengTo

  102. How To Design For Android Devices http://t.co/3GTqhBHq6E by @mengto

  103. How To Design For Android Devices – http://t.co/szAgAv21JR

  104. How to design for Android devices http://t.co/euYmDfzq4s #andriod #mobiledev

  105. How To Design For Android Devices by @MengTo: http://t.co/0V1hIsg9B6

  106. @Strubbl says:

    How To Design For Android Devices | Meng To – UI/UX Designer: http://t.co/TDXrVHoBkh

  107. How To Design For Android Devices by @MengTo: http://t.co/LFFq7UYfPE

  108. bea says:

    thanks for this!!!!!

  109. bea says:

    Hello!

    I am designing for Android tablets and it’s being quite difficult to understand the logic.
    I am designing for nexus 7 and samsung 10.1 – resolution It supossed to be the same 1280x800px, but when I paste and object from the big one to the smaller It’s 66,6% smaller.

    I want the understand the reason why.
    Is it because the density?
    For me is very confusing why even It is the same resolution elements are smaller on the big one.

    Thanks!

  110. @boydleep says:

    Android design patterns – a good overview on what you principles should guide your apps & what resolutions to target. http://t.co/GsPpznRox6

  111. @auroberjo says:

    How To Design For Android Devices | Meng To|UI/UX Designer http://t.co/9iIUIllVsG

  112. How To Design For #Android Devices http://t.co/OPjTwqIqq2

  113. How To Design For Android Devices by @MengTo: http://t.co/Y0BqUuWWZv

  114. @victomato says:

    How To Design For Android Devices by @MengTo: http://t.co/WKDobYqdSp

  115. @arjun_aj says:

    How To Design For Android Devices
    http://t.co/tnzW335Fui

  116. @blogdeai says:

    How To Design For Android Devices http://t.co/TtJcRH2jMM

  117. Hi! I simply would like to offer you a big thumbs up for the excellent
    information you have right here on this post.
    I will be coming back to your web site for more soon.

  118. Geof Harries says:

    Highly unrelated question, but what’s the wallpaper you’re using in the second from bottom screenshot (the one with Security & Privacy)? It looks cool.

  119. [...] How to design for Android devices [...]

  120. @mrxprt says:

    How To Design For Android Devices by @MengTo: http://t.co/WuJWoYMISW

  121. @mutkan says:

    Android tasarımı hakkında buldugum guzel bir yazi. http://t.co/4TUV4mhZ64

  122. I want to ask one question.
    Client gave one PSD (android design) which have screen size 48×800 px and 72 resolution pixel per inch.
    Client want to support all the devices with one resolution psd.
    I want to know how to do this?

    According to me, There are 4 popular resolution in Android
    320×480
    480×800
    540×960
    720×1280
    We have to rescale them all and we have to give resource images right? and we have to give 9patch images which don’t have gradients, effects.

    Also it would be really helpful for me, how to set the screen resolutions for LDPI, MDPI, HDPI, xHDPI.

    In iPhone i usually keeps 72 and 144 for non retina and retina.

    Hope you reply me.

    Thanks in advance.

  123. Steve says:

    I don’t think it’s good idea to don’t pay attention to design guidelines…

  124. Yankees So you can make all your field goals and Smith threw an interception in
    the air. You may also would like to abrasion
    Nike Nfl Nike Jerseys for women. The team has to find out about it that way late after making some halftime adjustments
    scoring all 21 points after halftime.

  125. [...] month period, over 70 thousands unique visitors came to my blog seeking information about Sketch, Android design and Solving The Back Button. Many came back. Designers would ask me questions directly on Twitter, [...]

  126. [...] How To Design For Android Devices Небольшой, но полезный обзор подводных камней дизайна Android-приложений от Meng To. Он описывает нюансы разрешений, нарезки, использования элементов управления и общей компоновки приложения. Инструмент для предварительного просмотра макетов на устройстве и генератор стилей для панелей приложения. [...]

  127. Serge says:

    Did anyone tried to purchase elements at http://crowdi.me/#!/store/all?
    Does it work well?

  128. [...] If you have some experience designing an iOS App, you’ll be familiar with the minimum sizes for typography (24px+, optimal for reading: 32px), buttons (44px to 88px) and navigation bar (72px to 98px). It’s also in line with Android devices. [...]

  129. [...] Documentação Oficial How to design for Android devices [...]

  130. [...] Documentação oficial How to design for Android Devices [...]

  131. Some genuinely interesting points you have written. Helped me a lot, just what I was searching for..

  132. Leesa says:

    If some onee desires expert view regarding running a blog
    afterward i advise him/her to pay a quck visit
    thhis webpage, Keep up thee fastidious job.

  133. Danny says:

    Since the screen res are up to 1920x1080px, unfortunately Roman Nurik’s little app, is not really usable anymore.

    Until Android 4.0.3 you could simply upload the prepared screen to your Phone and see it full screen. But after 4.1 this was not possible anymore because of the soft-keys. Now the only thing you might can do is to set up an android project in studio or eclipse and preview your app design there.

Leave a Reply