Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design in Android

Bb5be9156568ce4e8905547433d83214?s=47 anjhero
December 16, 2014

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

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