Let's use Material Theming

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