Material Design in Action

Transcript

1. Material Design In Action Henry Tao Full Stack Engineer hi@henrytao.me
2. Today Recipes • Material Design in Summary • Reality check • What’s next?
3. Material Design in Summary
4. Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. These layouts scale to fit any screen size, which simplifies the process of creating scalable apps.
5. Spacing & Size Color & Theme Layout & motion
6. Spacing & Size - 8dp scale - Touchable size 48dp
9. Typography?
10. English and English - like scripts Dense scripts - Chinese, Japanese, and Korean Tall scripts - South and Southeast Asian and Middle Eastern languages, including Arabic, Hindi, and Thai 3 main scripts
15. Color & Theme - 4 main palettes - 3 color hues
17. Apps that don’t have existing color schemes may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette.
18. <item name="colorPrimary">...........</item> <item name="colorPrimaryDark">...</item> <item name="colorAccent">.............</item>
21. Best practices?
22. Primary Palette - Accent Palette - Warn Palette - Background Palette Normal Hue - Light Hue - Dark Hue 4 main palettes x 3 color hues 100 - 500 - 700 - A100 - A200 - A400
26. What if material color palettes are not enough?
27. http://knizia.biz/mcg
28. Text color?
30. Light Background Dark Background
32. Primary Palette - Accent Palette - Warn Palette - Background Palette Normal Hue - Light Hue - Dark Hue 4 main palettes x 3 color hues 100 - 500 - 700 - A100 - A200 - A400 Light Background VS Dark Background Primary / Secondary / Hint Text Color - Divider Color - Icon Color
33. <style name="MdTheme.Light" parent="Theme.AppCompat.Light.NoActionBar"> <item name="mdColor_primaryPalette">@color/mdColor_cyan</item> <item name="mdColor_primaryPalette_dark">@color/mdColor_cyan_dark</item> <item name="mdColor_primaryPalette_light">@color/mdColor_cyan_light</item> <item name="mdColor_accentPalette">@color/mdColor_pink_accent</item> <item name="mdColor_accentPalette_dark">@color/mdColor_pink_accent_dark</item> <item name="mdColor_accentPalette_light">@color/mdColor_pink_accent_light</item> <item name="mdColor_warnPalette">@color/mdColor_red_accent</item> <item name="mdColor_warnPalette_dark">@color/mdColor_red_accent_dark</item> <item name="mdColor_warnPalette_light">@color/mdColor_red_accent_light</item> <item name="mdColor_backgroundPalette">@color/mdColor_white</item> <item name="mdColor_backgroundPalette_dark">@color/mdColor_white_dark</item> <item name="mdColor_backgroundPalette_light">@color/mdColor_white_light</item> <!-- textColor for primary palette --> <item name="mdTextColorPrimary_primaryPalette">@color/mdTextColorPrimary_light</item> <item name="mdTextColorPrimary_primaryPalette_dark">@color/mdTextColorPrimary_dark</item> <item name="mdTextColorPrimary_primaryPalette_light">@color/mdTextColorPrimary_light</item> <item name="mdTextColorSecondary_primaryPalette">@color/mdTextColorSecondary_light</item> <item name="mdTextColorSecondary_primaryPalette_dark">@color/mdTextColorSecondary_dark</item> <item name="mdTextColorSecondary_primaryPalette_light">@color/mdTextColorSecondary_light</item> <item name="mdTextColorHint_primaryPalette">@color/mdTextColorHint_light</item> <item name="mdTextColorHint_primaryPalette_dark">@color/mdTextColorHint_dark</item> <item name="mdTextColorHint_primaryPalette_light">@color/mdTextColorHint_light</item> <item name="mdColorDivider_primaryPalette">@color/mdColorDivider_light</item> <item name="mdColorDivider_primaryPalette_dark">@color/mdColorDivider_dark</item> <item name="mdColorDivider_primaryPalette_light">@color/mdColorDivider_light</item> … </style>
34. Layout & Motion Read the docs
37. Reality Check
38. What’s next?
39. Material Design is NOT JUST Android
40. References Material Design https://www.google.com/design/spec/material-design/introduction.html https://material.angularjs.org/latest/Theming/01_introduction Color & Theme http://www.materialui.co/colors http://www.materialpalette.com/ http://www.materialup.com/ Design & App https://www.pinterest.com/search/?q=material%20design Bootstrap Library https://github.com/henrytao-me/android-md-core
41. Try sample app https://goo.gl/Pb8XTa