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.
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.
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:
- Top: this area will stretch horizontally.
- Left: this area will stretch vertically.
- Right: this area will allow content vertically. This is where you set the padding for your content.
- Bottom: this area will allow content horizontally.
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.
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.
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.
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.
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.
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.
How To Design For Android Devices by @MengTo: http://t.co/FNXsPc2K
A light overview for designing for Android http://t.co/EjNaGnKg cc: @iconmaster (forgot to mention Design Preview to you)
How To Design For Android Devices by @MengTo: http://t.co/Z94xLd2W
How To Design For Android Devices http://t.co/hwlFAMk8
Design for Android • http://t.co/M75Nf10U
Haha @kennyadr http://t.co/7youwsdS ;)
How To Design For Android Devices by @MengTo: http://t.co/qrCF5Wqw
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+.
Corrected, thanks!
it’s still not right. The “up” button is the “up” button is the “up” button. It performs the “up” action which is more than what “back” does and less than “go back to any previous application and content”. It’s better to say that “up” should typically navigate back to the last section-level of navigation hierarchy (sometimes that’s effectively the same as “back”). Deep-linking into an app yields an interesting situation w.r.t. “up”: “back” definitely should go back out of your app (to the previous one that launched the Intent) while “up” can provide a means for the User to enter into the shallower area of your app should they wish to continue using it.
Kinda sucks that the “up” button is a left facing arrow, usually reserved for actions relating to ‘back’…
Usually reserved for “back” in what? Browsers and iOS? This is a different platform, back itself is slightly more complicated in Android than browsers and iOS. Here’s some reading: http://ux.stackexchange.com/questions/15939/android-back-button-global-history-back-or-menu-back
How To Design For Android Devices by @MengTo: http://t.co/umdUGBXb cc/ @AndroWiiid
How To Design For Android Devices by @MengTo: http://t.co/9FunIpka
How To Design For Android Devices http://t.co/BlOaLygc via @zite #teens #android #designers #apps #popular #2013 #news
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
[from khoiv] How To Design For Android Devices: http://t.co/6fEhJ3lN
Generally I do not learn article on blogs, but I would like
to say that this write-up very pressured me to try and do it!
Your writing style has been amazed me. Thanks, very nice article.
How To Design For Android Devices by @MengTo: http://t.co/qKZKMt4V
How To Design For Android Devices by @MengTo: http://t.co/0e5M5dNS
How To Design For #Android Devices http://t.co/Zk3jyjkk via @drmshaban
How To Design For Android Devices by @MengTo: http://t.co/kWIshGb2
How does the developer find out, how much 114px is in Android’s sp?
I am unfamiliar with the sp unit. But based on this article: http://stackoverflow.com/questions/2025282/difference-of-px-dp-dip-and-sp-in-android , I believe that you simply divide the number by 2. Same with dp.
@Matthias: About the sp and dp units. sp is a unit for font size (scaled pixel) which is a way of scaling font sizes according to the screen size, along with the user’s font size preferences.
dp or dip (density independent pixel) is a convention that comes from the early days of android phones, which had fixed screen dimensions with a width of 160px. All modern day devices consider the screen to be 160 density independent pixels wide, and it is the job of the OS to translate the dip to an actual number of physical pixels. So a measurement of some x dip will proportionally occupy the same amount of space on screens of different sizes.
Its a strange concept to wrap your head around in theory ( took me ages) but once you get used to it, its really simple to work with.
It’s actually pretty simple.
1dp = 1px @ 160ppi or 1dp = 1/160 inch. It is an abstraction which makes the pixel density of the screen irrelevant. Sizes of UI components should almost always be defined in dp rather than px so they can maintain the same physical size. 1dp = 1px @ 160ppi (mdpi), 1.5px @ 240ppi (hdpi), 2px @ 320ppi (xhdpi), etc. It is comparable to the “point” unit in iOS.
1sp = 1dp @ 100% scale. This correlates to a global text-size preference that some Android devices have. 10sp would be 11dp if the text size was set to 110%, for example.
What Josh says.
Also worth pointing out that you should not just use ‘sp’ because you “have to” or because someone told you to. It makes sense in most cases, in others it may not make sense or cause bigger problems (e.g. AppWidgets, where they have limited screen real estate to work with and often can’t afford the design to stretch and grow with the OS text size setting). Using ‘sp’ is always something you should “want to use”, it helps the vision impaired access your app.
Nice post!
You link got picked up by Hacker News
http://news.ycombinator.com/item?id=5235746
Thanks for mentioning! Hopefully, designers there will find this useful.
Reading: How To Design For Android Devices http://t.co/c4EdRId5
Interesting and really clean information RT @Kampitsch: How to design for Android devices http://t.co/SrFAbsKs
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 ;)
Sorry, what do you mean by “l19n”?
Oh, I didn’t know about right-to-left languages. Never designed for that case. Will look into it! :)
Probably l10n – “localization”, making app sensitive to locale (which is translation, and then some – things like 100,00 vs. 100.00, text direction etc.)
Interesting … i18n used to be “internationalization”. Is l10n something different, or just a new more PC term? =)
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/
How to #design for #android devices. #dev http://t.co/ZvT9UeOQ
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.
How To Design For Android Devices → http://t.co/g4yUCUFA (http://t.co/dSA87JF9)
#How To Design For Android Devices http://t.co/JUokktcP via @pryourblog
[…] 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 […]
Android cihazlar için genel tasarım kuralları http://t.co/2U4ZI7U1
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.
I’m a full-time user of Sketch now. I may start one soon.
Designing for android devices. http://t.co/1L5hsTRH
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.
http://t.co/XbL7gJDH
Good tips (UX, assets, fonts, …) for designing Android apps – most of them also directly applicable to web apps. http://t.co/7zlXMSGD
How To Design For Android Devices by @MengTo: http://t.co/3sSUbz0P
How To Design For Android Devices http://t.co/xntWOblO #UX #UI #design #webdesign awesome read
Great blog about Android design: http://t.co/9TDgmduF
[…] 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 […]
How To Design For Android Devices – http://t.co/WBftraRI #android #design #tutorial #tips
A great read for those unfamiliar with the system — How To Design For Android Devices by @MengTo: http://t.co/5sRz9AZC
После таких гайдов хочется порисовать для Android. http://t.co/odocc1d8
How To Design For Android Devices #mobile http://t.co/XIJMZ1nI
How To Design For Android Devices by @MengTo: http://t.co/hGGqmRCe
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/
How To Design For Android Devices http://t.co/hZfeJK98
How To Design For Android Devices by @MengTo: http://t.co/c9z5uZAU
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.
“How To Design For Android Devices” http://t.co/mYI6nasb
How To Design For Android Devices http://t.co/2eifIdYM #android #design
Interessant – How To Design For Android Devices – http://t.co/ON8W09PS #mobile #native
How To Design For Android Devices http://t.co/oE4moUzz
[…] How To Design For Android Devices via Meng To […]
A Few #Tips On How To #Design For #Android Devices http://t.co/38jdXKaD
How To Design For Android Devices – http://t.co/bQnlKcfp
How To Design For Android Devices http://t.co/nq5ktqh3
How To Design For Android Devices http://t.co/CjFiDDMv
[…] Bookmarked How To Design For Android Devices […]
How To Design For Android Devices – http://t.co/Fk2YfriA
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).
That’s good to know, thanks!
“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
How to design for Android devices, interesting http://t.co/uTqzjaeQ cc @lynnagara
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?
It varies from 110% to 116% and yes, it should apply to most components.
How To Design For Android Devices http://t.co/fNzOabaT
How To Design For Android Devices http://t.co/CUChvXfF
[…] 发表于 02/19/2013 由 craigleehi from Meng To http://blog.mengto.com/how-to-design-for-android-devices/ […]
How To Design For Android Devices by @MengTo: http://t.co/6LPfPntJ
http://t.co/HQVfFkJq how to design for android #holoyolo
Like: How to design for Android devices – http://t.co/X1NCjA6v
How To Design For Android Devices by @MengTo http://t.co/gGGKQuxS
How To Design For Android Devices by @MengTo: http://t.co/ZNoXAfCC
How To Design For Android Devices http://t.co/TGWb5wQv
How To Design For Android Devices by @MengTo: http://t.co/9VtZkDBr
This is a brilliant resource > How To Design For Android Devices by @MengTo: http://t.co/M6OV7nwG
How To Design For Android Devices http://t.co/7uK90xbS
راهنمای طراحی برای دستگاههای اندرویدی
http://t.co/9rrgPMxS
How To Design For Android Devices by @MengTo: http://t.co/jiNzkCvt
How To Design For #Android Devices http://t.co/aQNy1OMF #ux #design #mobile
How To Design For Android Devices http://t.co/XjT83OqV
How To Design For Android Devices http://t.co/FoTKm5cy #design Me: overview on #Android specifics, resources, processes
How To Design For Android Devices: http://t.co/Sc6IlyGA
How To Design For Android Devices: http://t.co/aBjFqIup #ux
How To Design For Android Devices by @MengTo: http://t.co/NcVk30my
Nice to be reminded that there is #design life outside of #ios. #UI #android http://t.co/00MebaeE
How To Design For Android Devices http://t.co/bPlt2tgI
How To Design For Android Devices – http://t.co/UHaUUCqX
[…] 文章来源:Meng To'Blog […]
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.
How To Design For Android Devices by @MengTo: http://t.co/uD0LTJbJ
How To Design For Android Devices: http://t.co/Hd3a1UGQ #ux
How To Design For Android Devices by @MengTo: http://t.co/KazKRa7w
@aten you need some 9-slice lovin’ http://t.co/YbaWCWZY
How To Design For Android Devices: http://t.co/4dy2iiSO
How To Design For Android Devices http://t.co/G1W2Czml
http://t.co/nvp5vD07AE
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)
The same question with you,anybody can answer me?
Another complexity that I’ve found is that the ratio of screen resolutions are not consistent through each density step (mdpi, hdpi, xhdpi). This is hard to explain but I’ll try…
The common screen resolutions are:
mdpi (1x): 320x480px
hdpi (1.5x): 480x800px
xhdpi (2x): 720x1280px
But all that often matters is the width…
When we make assets we adhere to the 1, 1.5 and 2x scales. But as you can see, this doesn’t apply to these screen resolutions. 480px is 1.5 times bigger than 320px which is good, but 720px isn’t 2x bigger than 320; 640px is (iPhone).
So this means that xhdpi screens are going to be relatively wider than hdpi and mdpi. You can see this clearly with text; you can fit one or two more words per line on xhdpi screens.
The sizes mentioned in this post retain the same relative width through each density step. It looks like he started with xhdpi (720px) and went from there. 360px is half of 720px and 540px is 0.75 of it.
So it may make your workflow easier, but it isn’t true to what most people will see.
Choose your battle :)
Yeah. It will be better you design in the resolution of ‘ 360px X 640 px ‘ which is ‘ mdpi ‘. So that you can crop all the drawables in correct size.
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) ;)
[…] 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 […]
[…] How to design for Android devices […]
[…] Meng to: How To Design For Android Devices […]
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?
480×800 is 16:10, 720×1280 is 16:9. That’s why you “lose” a part of the image.
As others said, you should not design by pixels in Android.
It is similar to responsive web design. There are a lot of different resolutions and ratios (starting from 240×320, 4:3, ending with 1920×1080, 16:9 on the smartphones, and 600×800 to 2560×1600 on tablets), screen sizes (2.4″ to 6″ on smartphones, 7″ to 11.6″ on tablets).
If you are making mockups or wireframes, you should use generic “paper-like” dimensions, like 2″x3.5″ (and 3.5″x2″ landscape) for (4″) smartphones, 2.5″x6″ (for 7″ tablets) and 4.7″x8.6″ (for 10″ tablets). But they should be indicative, not mathematical.
If you are making assets (icons, buttons, backgrounds) for the final app, try to make them vector-based (svg), or prepare them in different resolutions, as Google teaches: http://developer.android.com/design/index.html
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
[…] How To Design For Android Devices […]
[…] 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. […]
[…] Link […]
[…] How To Design For Android Devices http://blog.mengto.com/how-to-design-for-android-devices/ […]
[…] 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. […]
[…] 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. […]
[…] 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, […]
[…] How To Design For Android Devices http://blog.mengto.com/how-to-design-for-android-devices/ […]
[…] 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, […]
How To Design For Android Devices : http://t.co/1PssaTuiR8 Thx for this nice article @MengTo
How To Design For Android Devices http://t.co/3GTqhBHq6E by @mengto
How To Design For Android Devices – http://t.co/szAgAv21JR
How to design for Android devices http://t.co/euYmDfzq4s #andriod #mobiledev
How To Design For Android Devices by @MengTo: http://t.co/0V1hIsg9B6
How To Design For Android Devices | Meng To – UI/UX Designer: http://t.co/TDXrVHoBkh
How To Design For Android Devices by @MengTo: http://t.co/LFFq7UYfPE
thanks for this!!!!!
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!
Android design patterns – a good overview on what you principles should guide your apps & what resolutions to target. http://t.co/GsPpznRox6
How To Design For Android Devices | Meng To|UI/UX Designer http://t.co/9iIUIllVsG
How To Design For #Android Devices http://t.co/OPjTwqIqq2
How To Design For Android Devices by @MengTo: http://t.co/Y0BqUuWWZv
http://t.co/ElSOLPT5gx
How To Design For Android Devices by @MengTo: http://t.co/WKDobYqdSp
Designing for Android http://t.co/KSJSCfnPP5
How To Design For Android Devices
http://t.co/tnzW335Fui
How To Design For Android Devices http://t.co/TtJcRH2jMM
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.
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.
[…] How to design for Android devices […]
How To Design For Android Devices by @MengTo: http://t.co/WuJWoYMISW
How to design for android http://t.co/tDoSsyFKCU
[…] How To Design For Android Devices http://blog.mengto.com/how-to-design-for-android-devices/ […]
Android tasarımı hakkında buldugum guzel bir yazi. http://t.co/4TUV4mhZ64
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.
Hi Raghavendra,
Did you ever get a reply to your question? What is the Designer has just given a single PSD file. How will i scale it for different resolutions and screen sizes? Or does the designer need to create different PSD files?
Thanks in advance.
Fahad
I don’t think it’s good idea to don’t pay attention to design guidelines…
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.
[…] http://blog.mengto.com/how-to-design-for-android-devices/ […]
[…] 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, […]
[…] How To Design For Android Devices Небольшой, но полезный обзор подводных камней дизайна Android-приложений от Meng To. Он описывает нюансы разрешений, нарезки, использования элементов управления и общей компоновки приложения. Инструмент для предварительного просмотра макетов на устройстве и генератор стилей для панелей приложения. […]
[…] 文章来源:Meng To'Blog […]
Did anyone tried to purchase elements at http://crowdi.me/#!/store/all?
Does it work well?
[…] 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. […]
[…] Documentação Oficial How to design for Android devices […]
[…] Documentação oficial How to design for Android Devices […]
Some genuinely interesting points you have written. Helped me a lot, just what I was searching for..
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.
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.
[…] How To Design For Android Devices | Meng To – UI/UX Designer […]
Hi all, You may have performed an admirable job. I’m going to unquestionably bing it as well as independently recommend to help friends and neighbors. I am confident they’ll be took advantage of this web site.
[…] system. Getting used to this and the many different resolutions may seem overwhelming at first, but this guide on how to design for Android offers beginners tips on resolution, 9-slice scaling, designing for the back and up […]
Sonds Good, this information really help full.
thanks for your sharing!
[…] Download :How to design for android devices | meng to – ui/ux designer […]
[…] Documentação Oficial How to design for Android devices […]
[…] How To Design For Android Devices | Meng To – UI/UX … – Guide on how to design for Android devices and create high fidelity mockups to preview across multiple devices…. […]
[…] How To Design For Android Devices | Meng To – UI/UX … – Guide on how to design for Android devices and create high fidelity mockups to preview across multiple devices…. […]
[…] How To Design For Android Devices | Meng To – UI/UX Designer – Guide on how to design for Android devices and create high fidelity mockups to preview across multiple devices…. […]
[…] How To Design For Android Devices http://blog.mengto.com/how-to-design-for-android-devices/ […]
Its amazing post. I blog often and I truly appreciate your content. The article has truly peaked my interest. I’m going to take a note of your website and keep checking for new details about once a week. in IB Global Academy
Question asked by Raghavendra,
Did you ever get a reply to your question? What is the Designer has just given a single PSD file. How will i scale it for different resolutions and screen sizes? Or does the designer need to create different PSD files?
i am interested in this question plz if u can guide
[…] 我经常写一些关于iOS、Android和代码的文章。你可以在Twitter上通过@MengTo找到我。感谢阅读! […]
[…] 我经常写一些关于iOS、Android和代码的文章。你可以在Twitter上通过@MengTo找到我。感谢阅读! […]
Awesome man,
Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors. By taking advantage of Android’s flexible layout system, you can create apps that gracefully scale from large tablets to smaller phones.
Thanks for sharing and great effort or enjoyed to reading this article.
And unlike the traditional and commercial marketing strategies, WOMM will help build a fan base. It will not just earn you “visitors” – it will earn you loyal, repeat readers, customers, and fans.
Since my last blog post I’ve got lots of emails asking how to get WOMM for a blog. Here’s a sample question (slightly reworded for conciseness).
I read your post about word of mouth marketing and loved it. I came to know about this wonderful WOMM thing. I’ve understood its importance. But I am bit confused about how to get it for my blog.
I like this post. Thanks for sharing this article
Hey Admin,
An impressive and interesting information about that how to design for Android devices, there is different kinds of tools are available for a design like Adobe, where I used, One of the best tools ever, after getting read this article getting more knowledge and step of the design of any Devices analysis.
This is a wonderful article for Android coders. I am completely surprised by the lack of consistency that I see in the Play Store these days even as Google has (finally) provided many guidelines. So many iOS clones and legacy apps are aplenty — and they are from the biggest of developers! 4.0+ has provided a great theming system. Dev’s should stick to it.
Superb post. We can learn easily for this way and thanks for sharing and I really enjoyed to reading this post.
Thanks for sharing this great stuff. Today’s world everyone is using mobile phone so why not we should take the advantage to make them reach our services on their places through mobile website. user friendly and fast loading mobile website is very important for end users. Also there are few other advantage like one URL is accessible to all and social media linking and thanks for getting bunches of information of design of iPhone’s.
Different kind of technology is devolve in nowadays, but one of the leading platform which are independent is Android. There are several design tools, but give bunches of information from this post that how to make android device and how to complete very easily, thanks for shared and I really enjoyed to reading this post.
This information is worth everyone’s attention. How can I
find out more?
Look at my blog postthere fifa 15 ultimate team
hack; Geecu,
Apart from this I should say that people need to focus on new Material design and it’s awesome shared elements Animations. Let see how many applications follow that!
So cool
Very nice
One of the best tools ever, after getting read this article getting more knowledge and step of the design of any Devices analysis.
This information is worth everyone’s attention. How can I
find out more?
Thanks for sharing a valuable topic related to android.
nice try and i welcome your efforts indeed
[…] Если у вас есть какой-то опыт в дизайне iOS-приложений, то вы уже знакомы с минимальными размерами для типографики (24px+, оптимально для чтения: 32px), кнопок (44px — 88px) и панели навигации (72px — 98px). Эти стандарты также согласуются со стандартами для Android-устройств. […]
Appreciate your efforts.
Very informative, keep posting such good articles, it really helps to know about things.
I recently started developing on Android and one of the biggest riddle was the design on Android which is very different from iOS and other systems. Thanks for a detailed overview of stuff.
hi, I design for a minimum screen of minimum screen of 320 x 480 at MDPI, I don’t know the models of the top of my head I’m afraid.
Regard: Sunaina Rajpoot
You are viewing current godaddy.com coupons godaddy promo code
and discount promotions for August 2016.
For more about this website, and its current promotions connect with them on
There are many people who look for some important information about coupon usage on all top trickstop tricks of different apps In case you sign up for a lot of different accounts with just one card, you will be able to use
only one coupon at a time.In case you subscribe to just one account, you will still be able to use just one coupon. However, even a single coupon can help you save a lot of your hard earned money.
Hi, I want to design for a maximum of 860 x 1024 screen resolution and for almost full HD Quality. Your suggestion helped me a lot.
Regard: Feeha Batool
[…] How to design for Android devices […]
One of the best tools ever, after getting read this article getting more knowledge and step of the design of any Devices analysis.
As per the new iPhone 7 Price, in india it has good buyers.
Thank you so much! After reading this post, I have more idea whenever I work with my app designer.
download wap in movie free here..
tnx for this it was usefull to me
Thank you so much! After reading this post, I have more idea whenever I work with my app designer.
Can i use it on iOS ?
It is really useful information.
Thanks for the writing article.
I read this paragraph completely regarding the comparison of newest and preceding technologies, it’s awesome article.
Thank you for article!
[…] 我經常寫一些關於iOS、Android和代碼的文章。你可以在Twitter上通過@MengTo找到我。感謝閱讀! […]
I loved the information given above, I appreciate the writing. And yes it’s true that tuitions can very in a vast way in saving time and money.To get the best Home tutors visit us, on our website We have 60,000+ qualified tuition teachers to work with students of all ages from Pre-Nursery to Post Graduate. Please Visit :-http://thetuitionteacher.com/
For designing, it is important to process it from scratch by using some designing tools and layouts.
Hello, thank for the information. I would like to share this in Social media