Let's use Material Theming

https://mobileact.connpass.com/event/114158/

Transcript

1. Let's use Material Theming 2019/02/15 MobileAct OSAKA #8 Kazuki Watanabe
2. Profile ・なべ Twitter : @NabeCott GitHub : NUmeroAndDev ・Fenrir Inc. ・Android アプリ開発
3. 話すこと ・Material Design と Material Theming について基本的なこと を話します ・Android を参考に Material Theming を使うとどのようになる のか紹介しますが、細かな実装の話はしません ・知ってる人もそうでない人も Material Design に興味を持って もらえたら嬉しいです
4. Material Design について
5. Material Design とは? ・Google のデザインシステム ・Android 用のデザイン クロスプラットフォーム向け
6. Material Theming について
7. Material Theming とは? ・Material Design をカスタマイズしてアプリの個性や世界観を 出そう ・属性(Color、Shape、Typography)を決めることでプロジェクト のテーマが作れる
8. Material Theming の属性 ・Color ・Shape ・Typography
9. Color
10. Shape
11. Typography
12. Material Theming を使ってみよう
13. 以前の Material Design
14. Color Theming の適用 <color name="colorPrimary">#008577</color> <color name="colorPrimaryVariant">#00574B</color> <color name="colorSecondary">#03DAC6</color> <color name="colorSecondaryVariant">#018786</color> <color name="colorBackground">#FFFFFF</color> <color name="colorSurface">#FFFFFF</color> <color name="colorError">#B00020</color> <color name="colorOnPrimary">#FFFFFF</color> <color name="colorOnSecondary">#000000</color> <color name="colorOnBackground">#000000</color> <color name="colorOnSurface">#000000</color> <color name="colorOnError">#FFFFFF</color>
15. Color Theming の適用
16. Color Theming の適用 colorPrimary colorPrimary colorPrimaryVariant colorSecondary colorSurface
17. Shape Theming の適用 <style name="AppSmallShapeAppearance" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">cut</item> </style> <style name="AppMediumShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent"> <item name="cornerFamily">cut</item> </style> <style name="AppLargeShapeAppearance" parent="ShapeAppearance.MaterialComponents.LargeComponent"> <item name="cornerFamily">cut</item> </style>
18. Shape Theming の適用 ・Small Components Button、Chip、FAB、Text Field、Snackbar … ・Medium Components Card、Dialog、Image list item、Menu ・Large Components Backdrop、Data table、Bottom sheet、Nav drawer… https://material.io/design/shape/applying-shape-to-ui.html#shape-scheme
19. Shape Theming の適用
20. Shape Theming の適用 Small Components Medium Components
21. Typography Theming の適用 <style name="AppTextAppearanceHeadLine1" parent="TextAppearance.MaterialComponents.Headline1"> <item name="fontFamily">@font/lemonada</item> <item name="android:fontFamily">@font/lemonada</item> </style> <style name="AppTextAppearanceHeadLine2" parent="TextAppearance.MaterialComponents.Headline2"> <item name="fontFamily">@font/lemonada</item> <item name="android:fontFamily">@font/lemonada</item> </style> ……
22. Typography Theming の適用
23. Typography Theming の適用 Headline6 Subtitle1 Button
24. Before / After
25. 最後に ・Material Theming の登場で表現できる幅が広がった ・Android だけでなく iOS 、Flutter、Web でも利用できる ・ここでは紹介しきれなかったたくさんの UI Components が用 意されている
26. リンク ・参考 https://material.io/ https://github.com/material-components/material-componen ts-android ・サンプル https://github.com/NUmeroAndDev/MaterialThemingExamp le-android