Material Components for Android : Make consistent user interface

Material components for Android is an open-sourced library that make developers to work easily with material design specification and make ui components consistent. Collaboration between designers and developers have never been easier.

Transcript

1. Material Components for Android Make consistent user interface Photo by Tyler Callahan on Unsplash @Linminphyoe1
2. Who am I ? Lin Min Phyo @Linminphyoe1 Senior Android Developer Product, UI/UX, Software Architectures
3. History of Material Design
4. History of Material Design Material Design Google I/O 2014
5. History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015
6. History of Material Design
7. History of Material Design
8. History of Material Design Problem • Apps look very similar • Lack of expressiveness for branding
9. History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018
10. History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
11. History of Material Design Material Design Google I/O 2014 Design Support Library Google I/O 2015 Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
12. History of Material Design • New site material.io • More components • Material Theming Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
13. Material Theming Customization of your Material Design app to better reflect your product’s brand.
14. https://material.io/design/material-studies
15. Material Theming Typography Color Shape
16. History of Material Design • New site material.io • More components • Material Theming Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
17. History of Material Design • New site material.io • More components • Material Theming • Material Studies Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
18. Material Studies Case studies to showcase the flexibility of Material Theming and components
19. https://material.io/design/material-studies
20. History of Material Design • New site material.io • More components • Material Theming • Material Studies Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
21. History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
22. Material Components A set of open-sourced libraries for Material Design Components Material Design Components / MDC
23. Material Components https:/ /github.com/material-components
24. History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
25. History of Material Design • New site material.io • More components • Material Theming • Material Studies • Material Components Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018
26. History of Material Design Revamp Material Design Google I/O 2018 Material Components Library Google I/O 2018 Stable release on Nov 15, 2018 • Dark Theme Guidelines • Material Theme Builder • A lot of improvements on 
 MDC for Android within 
 I/O 18 & I/O 19 Google I/O 2019
27. Material Components
 for Android
28. What’s inside Material Components • UI Components • Styling Components • Material Theming Support
29. Add Material Components to project dependencies { // AndroidX implementation ‘com.google.android.material:material:<version>’ }
30. Add Material Components to project dependencies { // AndroidX implementation ‘com.google.android.material:material:<version>’ }
31. Add Material Components to project dependencies { // AndroidX implementation 'com.google.android.material:material:<version>' // Pre-AndroidX implementation ‘com.android.support:design:28.0.0' }
32. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet.
33. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView Chips
34. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView MaterialButton
35. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView MaterialCardView
36. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. Chips MaterialButton MaterialCardView BottomAppBar
37. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming MaterialButtonToggleGroup
38. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming Badge
39. Material Components Releases com.google.android.material:material:1.0.0 Some new components Material Theming is not ready, yet. com.google.android.material:material:1.1.0 Currently in alpha More components Support Material Theming Material Button Group
40. Applying Material Theme
41. Applying Material Theme <style name=“Base.AppTheme" parent=“Theme.AppCompact.Light”> </style>
42. Applying Material Theme <style name=“Base.AppTheme" parent=“Theme. .Light”> </style>
43. Applying Material Theme <!-— Full Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style>
44. Applying Material Theme <!-— Full Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style> <!-— Bridge Mode —-> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light.Bridge”> </style>
45. Styling Components
46. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style>
47. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>
48. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style>
49. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style> <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> </style>
50. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style> <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item> </style>
51. Styling Components <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> <item name=“materialCardViewStyle”> @style/Widget.AppTheme.CardView </item> </style> <style name=“Widget.AppTheme.CardView" parent=“@style/Widget.MaterialComponents.CardView"> <item name=“cardElevation">2dp</item> <item name=“cardUseCompatPadding">true</item> </style>
52. Styling Components actionBarStyle actionOverflowMenuStyle appBarLayoutStyle badgeStyle borderlessButtonStyle bottomAppBarStyle bottomNavigationStyle checkboxStyle chipStyle chipGroupStyle extendedFloatingActionButtonStyle floatingActionButtonStyle materialButtonStyle materialButtonOutlinedStyle materialButtonToggleGroupStyle materialCardViewStyle navigationViewStyle radioButtonStyle snackbarStyle snackbarButtonStyle switchStyle tabStyle textInputStyle toolbarStyle
53. Typography Theming
55. Typography Categories
59. Typography Theming in MDC-Android textAppearanceHeadline1 textAppearanceHeadline2 textAppearanceHeadline3 textAppearanceHeadline4 textAppearanceHeadline5 textAppearanceHeadline6 textAppearanceSubtitle1 textAppearanceSubtitle2 textAppearanceBody1 textAppearanceBody2 textAppearanceButton textAppearanceCaption textAppearanceOverline
60. Color Theming
62. Color Theming in MDC-Android colorPrimary colorPrimaryVariant colorSecondary colorSecondaryVariant android:colorBackground colorSurface colorError colorOnPrimary colorOnSecondary colorOnBackground colorOnSurface colorOnError
63. Shape Theming
65. Rounded Corner Cut Corner
66. Shape Theming in MDC-Android Components Size Small Medium Large Button Chip FAB Extended FAB Snackbar Text Field Card Dialog Menu Bottom Sheet Navigation Drawer
67. Shape Theming in MDC-Android shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent
68. Dark Theme
69. Dark Theme <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style> res/values/themes.xml Option 1
70. Dark Theme <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Light”> </style> <style name=“Base.AppTheme" parent=“Theme.MaterialComponents.Dark”> </style> res/values/themes.xml res/values-night/themes.xml Option 1
71. Dark Theme <style name=“Base.AppTheme” parent=“Theme.MaterialComponents.DayNight”> <item name=“colorPrimary”>@color/brand_green</item> </style> res/values/themes.xml Option 2
72. Dark Theme <style name=“Base.AppTheme” parent=“Theme.MaterialComponents.DayNight”> <item name=“colorPrimary”>@color/brand_green</item> </style> res/values/themes.xml res/values-night/colors.xml <resources> <color name="brand_green">#1DE9B6</color> </resources> res/values/colors.xml <resources> <color name="brand_green">#30BA85</color> </resources> Option 2
73. https://speakerdeck.com/nickbutcher/developing-themes-with- style-7d0571e3-6008-4ec5-99c6-aa5669520124?slide=262
74. Dark Theme Widget.MaterialComponents.BottomAppBar.PrimarySurface Widget.MaterialComponents.BottomNavigationView.PrimarySurface Widget.MaterialComponents.TabLayout.PrimarySurface Widget.MaterialComponents.Toolbar.PrimarySurface
75. Material Theme Builder Project for visualizing Material Theming
76. Material Theme Builder Android • Github https://material.io/tools/build-a-material-theme/ Web • Glitch
77. Material Theme Builder Android • Github https://material.io/tools/build-a-material-theme/ • type.xml • shape.xml • color.xml • night/color.xml
78. Designer Resources • https:/ /material.io/tools/theme-editor/
79. Resources • https:/ /material.io • https:/ /material.io/collections/getting-started/#01 • https:/ /speakerdeck.com/nickbutcher/developing- themes-with-style-7d0571e3-6008-4ec5-99c6- aa5669520124 • https:/ /github.com/material-components/material- components-android/
80. Q & A Material Components for Android : Make consistent user interface @Linminphyoe1