Save 37% off PRO during our Black Friday Sale! »

Material Design in Android

Bb5be9156568ce4e8905547433d83214?s=47 anjhero
December 16, 2014
Design
3
130

Material Design in Android

This is from a small sharing program we had at our office YoungInnovations about the possibilities and opportunities that Material Design brings in Android.

Bb5be9156568ce4e8905547433d83214?s=128

anjhero

December 16, 2014
Tweet

More Decks by anjhero

See All by anjhero
Bb5be9156568ce4e8905547433d83214?s=48 anjhero
0
130
Bb5be9156568ce4e8905547433d83214?s=48 anjhero
0
110
Bb5be9156568ce4e8905547433d83214?s=48 anjhero
2
240

Other Decks in Design

See All in Design
635b0000e69f3203c8b41df47293d451?s=48 takumasaito
3
1.3k
6d91cf9d7d3eb0954425a0a8aef69bef?s=48 andreh
0
180
1174a67bf81e480b34f5d2e889d8b90d?s=48 yuki_yano
PRO
0
150
3a4558b73969fa377bf1a96a00e58e5e?s=48 ka_kaka1102
0
2.7k
4b7cfc2f7e1087517064667a30fddd54?s=48 commmune
1
3.4k
D61f44a8b9fc51da30e971bb741705e7?s=48 rjkroeplin
0
160
Ab8c85abd123fc26817fad242cf4ad4c?s=48 uhzz
0
9.3k
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
300
E7a26dfe337b078af506ec7f79d01557?s=48 ruthbaraz
PRO
2
560
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
1
230
Bd2cd58cea35f0c4d8965329b8a9d252?s=48 mtym27
5
4.6k
Dc5be06c50fdfe681913540a3effdcc8?s=48 kazuyaseki
14
7.6k

Featured

See All Featured
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
61
6.9k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
6.9k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
191
14k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
148
20k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.8k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
6
28k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
20k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
332
36k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
236
18k

Transcript

  1. None

  2. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources

  3. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI patterns •  FAB 3.  Resources

  4. HOME SCREEN ALL APPS SCREEN OVERVIEW Previously Recents Screen

  5. Status Bar Navigation Bar

  6. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  View Collections •  Animations •  FAB 3.  Resources

  7. Everything you see resides on a paper   meet  

    MATERIAL DESIGN  

  8. Paper   Ink   The material on which ink is

    drawn.   Every pixel drawn by an app on a piece of paper  

  9. Paper   Ink   The material on which ink is

    drawn.   Every pixel drawn by an app on a piece of paper   A  very  good  a+ernoon  to   you  
  10. None

  11. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  View Collections •  Animations •  FAB 3.  Resources
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None

  19. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources

  20. Primary Color Accent Color Bold Colors  

  21. Content can provide color! Meet Palette  

  22. None

  23. VIBRANT MUTED DARK VIBRANT DARK MUTED LIGHT VIBRANT LIGHT MUTED

  24. DARK VIBRANT This is a body text Palette also lets

    you extract   Colors for Title and Body   Dark Vibrant   Title color generated from Dark Vibrant   Body text color generated from Dark Vibrant  

  25. and hence,   You can do this  

  26. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources
  27. None
  28. None
  29. None
  30. None

  31. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources

  32. App bar

  33. None
  34. None
  35. None

  36. Navigations

  37. SPINNER

  38. TABS

  39. NAVIGATION DRAWER

  40. View Collections

  41. LISTS

  42. CARDS

  43. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources

  44. FAB Floating Action Button The primary action of your app

    +

  45. Floating Action Button The primary action of your app

  46. 1.  Android Interface 2.  Material Design •  Tangible Surfaces • 

    Color •  Animations •  UI Patterns •  FAB 3.  Resources

  47. Follow (Material) Design Patterns http://www.google.com/design/ spec/material-design/ introduction.html

  48. Material Up http://www.materialup.com/

  49. Android App Design Showcase http:// androidniceties.tumblr.com/

  50. YouTube Android Developers Channel http://www.youtube.com/user/ androiddevelopers

  51. Roman Nurik

  52. Nick Butcher

  53. Matias Duarte

  54. Follow the user And all else will follow