10 ms·

Android Patterns

147 points by mcgin 16y ago

Pewpewarrows 16y ago
I was looking for something like this the other day, thanks.
ry0ohki 16y ago
This is amazing. Google's UI guidelines are severely lacking, so far I've just been looking at other Android apps for some guidance, and many of them are just kind of loosely based on existing iPhone apps. Hope this site continues to improve!
tunaslut 16y ago
it's like the HIG for android - cool....linking these to code samples for each pattern could render a very cool manual for android development :)
ashbrahma 16y ago
Looks like this was done using Balsamiq. Definitely a handy tool for any designer!
- rickleroy 16y ago
  No not Balsamiq. Actually we used Mike Clarke's stencils (http://graffletopia.com/stencils/578 http://graffletopia.com/stencils/578) as a valuable base. We added a little and converted it to a 'stencil' for FireWorks. You can downlaod the toolkit for free at the site. Use it as you like. And of course we will be extremely happy if you add / shareone new android pattern ;-).
OoTheNigerian 16y ago
Wonderfully done. Thanks!
daemon 16y ago
Awesome. I'm developing my first Android app and this should prove to be very helpful.
Lewisham 16y ago
I just got an Android with that great Virgin Mobile deal, and I was surprised at just how much the Back button is used in almost all contexts. It's severely overloaded: want to get out of an on-screen keyboard? Back. Want to move back a screen? Back, except when it's Google Reader that opened a Browser window, in which case it takes you back to the previous page that Browser had. Back through a menu? Back. Back to a previous page in Browser? Back. It's as if people just substituted the button for any instance in human language where "back" was used. What's somewhat interesting is that I found myself wishing that I could just swipe left in order to achieve the same functionality, if I am going to be forced to do it so much. Then I realized Windows Phone 7 uses swipe left as "back" in some contexts. Sometimes you do have to give Microsoft credit :)
- tomjen3 16y ago
  I love the back button, and I love how easy it is to get out of whatever I am doing.
  - gcb 16y ago
    "Back" to some random place most of the time. 1. receive email notification for two messages. 2. click notification bar 3. go to gmail app. 4. open first message and click a link. 5. you are now in the browser. (clicking back will close the window, but you want to read it later!) 6. you long press HOME button (hoping to select gmail and read the other message) 7. gmail is not in the open app list (WTH?!)\ 8. you curse, click home, find the gmail app, click it. 9. now you are on the message with the link 10. press BACK 11. now you are on the message list (aha! not you home screen you came from!) 12. click the 2nd message and read it (edit: how do you make new lines without being forced to make paragraphs?)
    - tomjen3 16y ago
      Actually step seven is "add to instafetch", but yeah, it isn't perfect.
- sp332 16y ago
  I gradually realized that I treat the Back button as a game. I have no idea where it will take me, so whenever I don't like what's on the screen and want to be "somewhere else", I just push the back button until I see something better, or I'm on the home screen. It's kinda fun, but very bad design :-)
mrinterweb 16y ago
This is a great resource for commonly observed interface conventions. It seems many applications have been ported from iOS to Android and the UI has not been changed that much. While there are a lot of good interface techniques are shared by Android and iOS there are also many differences how Android and iOS applications are used.
ianhawes 16y ago
As an iOS user developing for Android, this is awesome. Thanks!
adn37 16y ago
Adding code samples (java & layouts) would be even more awesome. Very interesting, still.
- SkyMarshal 16y ago
  They should make that part social - let devs upload their own, rate them, etc. Github for Android patterns, sort of.
  - rickleroy 16y ago
    We (Unitid / androidpatterns.com) like that idea. Maybe you (this group) can help us implement it. Looking forward to your suggestions!
- wacheena 16y ago
  Yes. UI is one thing, but many devs out there are using these patterns and everyone reinvents the wheel to implement them.
- cpeterso 16y ago
  How many of these UI patterns are already codified in Android's app framework? It would be cool if these identified patterns were presented in a mini-framework.
JacobIrwin 16y ago
Android Patterns does a good job of presenting the basics. I have the HTC Evo and the Android 2.0 software beats anything else I've ever used. The top 3 rated phones on PCworld are all ran by Android 2.0 software (with iPhone coming in fourth place). Also, for all you app developers out there, development in 2.0 is your best bet. Androids still have less apps out there compared with iPhone OS at this stage, so you'll have a little less competition to deal with.
chopsueyar 16y ago
Is there an iOS equivalent of this info?
- fleitz 16y ago
  Yes, it's called the Apple HIG. http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556 http://developer.apple.com/library/ios/#documentation/UserEx... The nice part about the Apple version is that if you don't follow it your app doesn't make it into the store.
fleitz 16y ago
For anyone interested in the iOS equivalent look here: http://bit.ly/Apple_IOS_HIG http://bit.ly/Apple_IOS_HIG
- asmosoinio 16y ago
  Full link: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556 http://developer.apple.com/library/ios/#documentation/UserEx...

147 points by mcgin 16y ago

I was looking for something like this the other day, thanks.

This is amazing. Google's UI guidelines are severely lacking, so far I've just been looking at other Android apps for some guidance, and many of them are just kind of loosely based on existing iPhone apps. Hope this site continues to improve!

tunaslut 16y ago

it's like the HIG for android - cool....linking these to code samples for each pattern could render a very cool manual for android development :)

ashbrahma 16y ago

Looks like this was done using Balsamiq. Definitely a handy tool for any designer!

rickleroy 16y ago
No not Balsamiq. Actually we used Mike Clarke's stencils (http://graffletopia.com/stencils/578 http://graffletopia.com/stencils/578) as a valuable base. We added a little and converted it to a 'stencil' for FireWorks. You can downlaod the toolkit for free at the site. Use it as you like. And of course we will be extremely happy if you add / shareone new android pattern ;-).

OoTheNigerian 16y ago

Wonderfully done. Thanks!

daemon 16y ago

Awesome. I'm developing my first Android app and this should prove to be very helpful.

Lewisham 16y ago

I just got an Android with that great Virgin Mobile deal, and I was surprised at just how much the Back button is used in almost all contexts. It's severely overloaded: want to get out of an on-screen keyboard? Back. Want to move back a screen? Back, except when it's Google Reader that opened a Browser window, in which case it takes you back to the previous page that Browser had. Back through a menu? Back. Back to a previous page in Browser? Back. It's as if people just substituted the button for any instance in human language where "back" was used. What's somewhat interesting is that I found myself wishing that I could just swipe left in order to achieve the same functionality, if I am going to be forced to do it so much. Then I realized Windows Phone 7 uses swipe left as "back" in some contexts. Sometimes you do have to give Microsoft credit :)

tomjen3 16y ago
I love the back button, and I love how easy it is to get out of whatever I am doing.
- gcb 16y ago
  "Back" to some random place most of the time. 1. receive email notification for two messages. 2. click notification bar 3. go to gmail app. 4. open first message and click a link. 5. you are now in the browser. (clicking back will close the window, but you want to read it later!) 6. you long press HOME button (hoping to select gmail and read the other message) 7. gmail is not in the open app list (WTH?!)\ 8. you curse, click home, find the gmail app, click it. 9. now you are on the message with the link 10. press BACK 11. now you are on the message list (aha! not you home screen you came from!) 12. click the 2nd message and read it (edit: how do you make new lines without being forced to make paragraphs?)
  - tomjen3 16y ago
    Actually step seven is "add to instafetch", but yeah, it isn't perfect.
sp332 16y ago
I gradually realized that I treat the Back button as a game. I have no idea where it will take me, so whenever I don't like what's on the screen and want to be "somewhere else", I just push the back button until I see something better, or I'm on the home screen. It's kinda fun, but very bad design :-)

mrinterweb 16y ago

This is a great resource for commonly observed interface conventions. It seems many applications have been ported from iOS to Android and the UI has not been changed that much. While there are a lot of good interface techniques are shared by Android and iOS there are also many differences how Android and iOS applications are used.

ianhawes 16y ago

As an iOS user developing for Android, this is awesome. Thanks!

adn37 16y ago

Adding code samples (java & layouts) would be even more awesome. Very interesting, still.

SkyMarshal 16y ago
They should make that part social - let devs upload their own, rate them, etc. Github for Android patterns, sort of.
- rickleroy 16y ago
  We (Unitid / androidpatterns.com) like that idea. Maybe you (this group) can help us implement it. Looking forward to your suggestions!
wacheena 16y ago
Yes. UI is one thing, but many devs out there are using these patterns and everyone reinvents the wheel to implement them.
cpeterso 16y ago
How many of these UI patterns are already codified in Android's app framework? It would be cool if these identified patterns were presented in a mini-framework.

JacobIrwin 16y ago

Android Patterns does a good job of presenting the basics. I have the HTC Evo and the Android 2.0 software beats anything else I've ever used. The top 3 rated phones on PCworld are all ran by Android 2.0 software (with iPhone coming in fourth place). Also, for all you app developers out there, development in 2.0 is your best bet. Androids still have less apps out there compared with iPhone OS at this stage, so you'll have a little less competition to deal with.

chopsueyar 16y ago

Is there an iOS equivalent of this info?

fleitz 16y ago
Yes, it's called the Apple HIG. http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556 http://developer.apple.com/library/ios/#documentation/UserEx... The nice part about the Apple version is that if you don't follow it your app doesn't make it into the store.

fleitz 16y ago

For anyone interested in the iOS equivalent look here: http://bit.ly/Apple_IOS_HIG http://bit.ly/Apple_IOS_HIG

asmosoinio 16y ago
Full link: http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556 http://developer.apple.com/library/ios/#documentation/UserEx...