Android UI Design Trends

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
http://gigigo.com

http://limecreativelabs.com
http://gplus.to/antonioleiva

@lime_cl

http://goo.gl/iEUPpH
contact@antoni...
ICE CREAM SANDWICH (HOLO)

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
Android UI/UX
http://androiduiux.com/free-design-resources/
Android UI Patterns
http://www.androiduipatterns.com/
Android ...
BANDHOOK PROTOTYPE

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
KEY IDEAS ABOUT DESIGN
Screen fragmentation

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Lei...
KEY IDEAS ABOUT DESIGN
Modular structures

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva...
KEY IDEAS ABOUT DESIGN
Modular structures

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva...
KEY IDEAS ABOUT DESIGN
Modular structures

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva...
KEY IDEAS ABOUT DESIGN
Design patterns

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Go...
KEY IDEAS ABOUT DESIGN

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
PLAY MUSIC (OLD DESIGN)

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
PLAY MUSIC (CURRENT DESIGN)

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
PLAY MUSIC (CURRENT DESIGN)

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
DESIGN PATTERNS
Navigation Drawer

Action Bar

Popup Menu

Cards UI

Pin progress

Sliding up panel
http://gplus.to/antoni...
ACTION BAR

1. App Icon
3. Action Buttons

2. View
Control
4. Overflow menu

•Native (11+): http://developer.android.com/g...
ACTION BAR
Fading Action Bar

https://github.com/ManuelPeinado/FadingActionBar
http://gplus.to/antonioleiva

@lime_cl

con...
ACTION BAR
Glass Action Bar

https://github.com/ManuelPeinado/GlassActionBar
http://gplus.to/antonioleiva

@lime_cl

conta...
ACTION BAR
Not Boring Action Bar

http://flavienlaurent.com/blog/2013/11/20/making-your-action-bar-not-boring/
http://gplu...
NAVIGATION DRAWER

http://developer.android.com/training/implementing-navigation/nav-drawer.html
http://gplus.to/antoniole...
NAVIGATION DRAWER

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
NAVIGATION DRAWER

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
END/RIGHT DRAWER

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
SLIDING PANE

http://www.limecreativelabs.com/sliding-pane-layout/
http://gplus.to/antonioleiva

@lime_cl

contact@antonio...
SLIDING UP PANEL

http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.com

Antonio Leiva Gordillo
SLIDING UP PANEL

https://github.com/umano/AndroidSlidingUpPanel
http://gplus.to/antonioleiva

@lime_cl

contact@antoniole...
YOUTUBE SLIDING VIDEO

http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/
http://gpl...
PIN PROGRESS

https://code.google.com/p/romannurik-code/source/browse/misc/pinprogress/
http://gplus.to/antonioleiva

@lim...
CARDS UI

CardsLib: https://github.com/gabrielemariotti/cardslib
CardsUI: https://github.com/Androguide/cardsui-for-androi...
POPUP MENU

http://developer.android.com/design/patterns/selection.html
http://gplus.to/antonioleiva

@lime_cl

contact@an...
POPUP MENU

PopupMenu (11+): http://developer.android.com/reference/android/widget/PopupMenu.html
PopupWindow (1+): http:/...
TAB STRIP

https://github.com/astuetz/PagerSlidingTabStrip
http://gplus.to/antonioleiva

@lime_cl

contact@antonioleiva.co...
SWIPE TO DISMISS

SwipeListView: https://github.com/47deg/android-swipelistview
http://gplus.to/antonioleiva

@lime_cl

co...
UNDO

EnhancedListView (with undo): https://github.com/timroes/EnhancedListView
http://gplus.to/antonioleiva

@lime_cl

co...
PULL TO REFRESH

https://github.com/chrisbanes/ActionBar-PullToRefresh
http://gplus.to/antonioleiva

@lime_cl

contact@ant...
• Designing awesome apps is easy using
common design patterns
– They are proved to work
– Well known by users

• Good desi...
Antonio Leiva Gordillo
Android Developer at Gigigo
contact@antonioleiva.com

http://www.limecreativelabs.com
http://www.an...
Upcoming SlideShare
Loading in...5
×

Android UI Design Trends

15,376

Published on

Published in: Technology, Business
1 Comment
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,376
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
113
Comments
1
Likes
44
Embeds 0
No embeds

No notes for slide

Android UI Design Trends

  1. 1. Android UI Design Trends http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  2. 2. http://gigigo.com http://limecreativelabs.com http://gplus.to/antonioleiva @lime_cl http://goo.gl/iEUPpH contact@antonioleiva.com Antonio Leiva Gordillo
  3. 3. ICE CREAM SANDWICH (HOLO) http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  4. 4. http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  5. 5. Android UI/UX http://androiduiux.com/free-design-resources/ Android UI Patterns http://www.androiduipatterns.com/ Android Design in Action http://goo.gl/EQpcGd http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  6. 6. BANDHOOK PROTOTYPE http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  7. 7. KEY IDEAS ABOUT DESIGN Screen fragmentation http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  8. 8. KEY IDEAS ABOUT DESIGN Modular structures http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  9. 9. KEY IDEAS ABOUT DESIGN Modular structures http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  10. 10. KEY IDEAS ABOUT DESIGN Modular structures http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  11. 11. KEY IDEAS ABOUT DESIGN Design patterns http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  12. 12. KEY IDEAS ABOUT DESIGN http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  13. 13. PLAY MUSIC (OLD DESIGN) http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  14. 14. PLAY MUSIC (CURRENT DESIGN) http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  15. 15. PLAY MUSIC (CURRENT DESIGN) http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  16. 16. DESIGN PATTERNS Navigation Drawer Action Bar Popup Menu Cards UI Pin progress Sliding up panel http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  17. 17. ACTION BAR 1. App Icon 3. Action Buttons 2. View Control 4. Overflow menu •Native (11+): http://developer.android.com/guide/topics/ui/actionbar.html •ActionBarCompat (7+): http://antonioleiva.com/actionbarcompat-how-to-use/ •ActionBarSherlock: http://actionbarsherlock.com/ http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  18. 18. ACTION BAR Fading Action Bar https://github.com/ManuelPeinado/FadingActionBar http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  19. 19. ACTION BAR Glass Action Bar https://github.com/ManuelPeinado/GlassActionBar http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  20. 20. ACTION BAR Not Boring Action Bar http://flavienlaurent.com/blog/2013/11/20/making-your-action-bar-not-boring/ http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  21. 21. NAVIGATION DRAWER http://developer.android.com/training/implementing-navigation/nav-drawer.html http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  22. 22. NAVIGATION DRAWER http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  23. 23. NAVIGATION DRAWER http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  24. 24. END/RIGHT DRAWER http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  25. 25. SLIDING PANE http://www.limecreativelabs.com/sliding-pane-layout/ http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  26. 26. SLIDING UP PANEL http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  27. 27. SLIDING UP PANEL https://github.com/umano/AndroidSlidingUpPanel http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  28. 28. YOUTUBE SLIDING VIDEO http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/ http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  29. 29. PIN PROGRESS https://code.google.com/p/romannurik-code/source/browse/misc/pinprogress/ http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  30. 30. CARDS UI CardsLib: https://github.com/gabrielemariotti/cardslib CardsUI: https://github.com/Androguide/cardsui-for-android http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  31. 31. POPUP MENU http://developer.android.com/design/patterns/selection.html http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  32. 32. POPUP MENU PopupMenu (11+): http://developer.android.com/reference/android/widget/PopupMenu.html PopupWindow (1+): http://developer.android.com/reference/android/widget/PopupWindow.html PopupMenuCompat: https://github.com/Taig/PopupMenuCompat http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  33. 33. TAB STRIP https://github.com/astuetz/PagerSlidingTabStrip http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  34. 34. SWIPE TO DISMISS SwipeListView: https://github.com/47deg/android-swipelistview http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  35. 35. UNDO EnhancedListView (with undo): https://github.com/timroes/EnhancedListView http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  36. 36. PULL TO REFRESH https://github.com/chrisbanes/ActionBar-PullToRefresh http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  37. 37. • Designing awesome apps is easy using common design patterns – They are proved to work – Well known by users • Good design is essential for an app to succeed • It’s really easy to replicate most used patterns – Included in SDK – Tons of libraries ready to use http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  38. 38. Antonio Leiva Gordillo Android Developer at Gigigo contact@antonioleiva.com http://www.limecreativelabs.com http://www.antonioleiva.com http://gplus.to/antonioleiva @lime_cl http://es.linkedin.com/in/antoniolg http://gplus.to/antonioleiva @lime_cl contact@antonioleiva.com Antonio Leiva Gordillo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×