Material Design in Android

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