From design to develop with Material Components

Android Bangkok Conference 2019

Transcript

1. From design to develop with Material Components
2. What is Material Design
3. Google I/O 2014
5. Google I/O 2018
7. Design
8. Material Theming
10. Foundation
11. Material Foundation • Color • Typography • Iconography • Layout • Shape • Motion (Animation)
16. Develop
17. Adding dependency implementation 'com.google.android.material:material:1.1.0-alpha07' repositories { google() jcenter() }
18. Requirements - compileSdkVersion 28 - using AppCompatActivity - using Theme.MaterialComponents
19. Theme Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.DayNight Theme.MaterialComponents.DayNight.NoActionBar Theme.MaterialComponents.DayNight.DarkActionBar
20. Theme Bridge Theme.MaterialComponents.Bridge Theme.MaterialComponents.Light.Bridge Theme.MaterialComponents.NoActionBar.Bridge Theme.MaterialComponents.Light.NoActionBar.Bridge Theme.MaterialComponents.Light.DarkActionBar.Bridge
21. Theming
22. Theming • Color Theming • Shape Theming • Typography Theming • Dark Theme*
24. Color Theming
25. Color Theming
27. Shape Theming
28. Shape Theming
30. Typography Theming
31. Typography Theming
32. Dark Theme* res/values/color.xml res/values-night/color.xml
34. Components
35. Alert Dialog
36. Bottom App Bar bottomAppBar.replaceMenu(R.menu.bottom_app_bar_menu)
37. Material Button
38. And more….. https://material.io/develop/android/components
40. How’s about MDC in 2019?
41. ML-powered features
42. Camera - Barcode scanning
43. Camera - Live Object detection
44. Photos - Object detection
45. Tools
46. Material Theme Editor
48. Material Theme Builder
49. https://material-theme-builder.glitch.me
51. Color Tool
53. Icon
55. Interested?
56. https://material.io/
57. https://material.io/collections/developer-tutorials