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

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

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

Material Design について

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

Material Theming について

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

Material Theming の属性 ・Color ・Shape ・Typography

Color

Shape

Typography

Material Theming を使ってみよう

以前の Material Design

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

Color Theming の適用

Color Theming の適用 colorPrimary colorPrimary colorPrimaryVariant colorSecondary colorSurface

Shape Theming の適用 <item name="cornerFamily">cut</item> <item name="cornerFamily">cut</item> <item name="cornerFamily">cut</item>

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

Shape Theming の適用

Shape Theming の適用 Small Components Medium Components

Typography Theming の適用 <item name="fontFamily">@font/lemonada</item> <item name="android:fontFamily">@font/lemonada</item> <item name="fontFamily">@font/lemonada</item> <item name="android:fontFamily">@font/lemonada</item> ……

Typography Theming の適用

Typography Theming の適用 Headline6 Subtitle1 Button

Before / After

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

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