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

Let's use Material Theming

Nabe
February 15, 2019

Let's use Material Theming

Nabe

February 15, 2019
Tweet

More Decks by Nabe

Other Decks in Design

Transcript

  1. Let's use Material Theming
    2019/02/15
    MobileAct OSAKA #8
    Kazuki Watanabe

    View Slide

  2. Profile
    ・なべ
    Twitter : @NabeCott
    GitHub : NUmeroAndDev
    ・Fenrir Inc.
    ・Android アプリ開発

    View Slide

  3. 話すこと
    ・Material Design と Material Theming について基本的なこと
    を話します
    ・Android を参考に Material Theming を使うとどのようになる
    のか紹介しますが、細かな実装の話はしません
    ・知ってる人もそうでない人も Material Design に興味を持って
    もらえたら嬉しいです

    View Slide

  4. Material Design について

    View Slide

  5. Material Design とは?
    ・Google のデザインシステム
    ・Android 用のデザイン クロスプラットフォーム向け

    View Slide

  6. Material Theming について

    View Slide

  7. Material Theming とは?
    ・Material Design をカスタマイズしてアプリの個性や世界観を
    出そう
    ・属性(Color、Shape、Typography)を決めることでプロジェクト
    のテーマが作れる

    View Slide

  8. Material Theming の属性
    ・Color
    ・Shape
    ・Typography

    View Slide

  9. Color

    View Slide

  10. Shape

    View Slide

  11. Typography

    View Slide

  12. Material Theming を使ってみよう

    View Slide

  13. 以前の Material Design

    View Slide

  14. Color Theming の適用
    #008577
    #00574B
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #B00020
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF

    View Slide

  15. Color Theming の適用

    View Slide

  16. Color Theming の適用
    colorPrimary
    colorPrimary colorPrimaryVariant
    colorSecondary
    colorSurface

    View Slide

  17. Shape Theming の適用
    parent="ShapeAppearance.MaterialComponents.SmallComponent">
    cut

    parent="ShapeAppearance.MaterialComponents.MediumComponent">
    cut

    parent="ShapeAppearance.MaterialComponents.LargeComponent">
    cut

    View Slide

  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

    View Slide

  19. Shape Theming の適用

    View Slide

  20. Shape Theming の適用
    Small Components
    Medium Components

    View Slide

  21. Typography Theming の適用
    parent="TextAppearance.MaterialComponents.Headline1">
    @font/lemonada
    @font/lemonada

    parent="TextAppearance.MaterialComponents.Headline2">
    @font/lemonada
    @font/lemonada

    ……

    View Slide

  22. Typography Theming の適用

    View Slide

  23. Typography Theming の適用
    Headline6
    Subtitle1
    Button

    View Slide

  24. Before / After

    View Slide

  25. 最後に
    ・Material Theming の登場で表現できる幅が広がった
    ・Android だけでなく iOS 、Flutter、Web でも利用できる
    ・ここでは紹介しきれなかったたくさんの UI Components が用
    意されている

    View Slide

  26. リンク
    ・参考
    https://material.io/
    https://github.com/material-components/material-componen
    ts-android
    ・サンプル
    https://github.com/NUmeroAndDev/MaterialThemingExamp
    le-android

    View Slide