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
   

   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