Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's use Material Theming

37618b4d60cf3d1f43f7196253264edc?s=47 Nabe
February 15, 2019

Let's use Material Theming

37618b4d60cf3d1f43f7196253264edc?s=128

Nabe

February 15, 2019
Tweet

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