Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Material Design について

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Material Theming について

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Material Theming の属性 ・Color ・Shape ・Typography

Slide 9

Slide 9 text

Color

Slide 10

Slide 10 text

Shape

Slide 11

Slide 11 text

Typography

Slide 12

Slide 12 text

Material Theming を使ってみよう

Slide 13

Slide 13 text

以前の Material Design

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Color Theming の適用

Slide 16

Slide 16 text

Color Theming の適用 colorPrimary colorPrimary colorPrimaryVariant colorSecondary colorSurface

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Shape Theming の適用

Slide 20

Slide 20 text

Shape Theming の適用 Small Components Medium Components

Slide 21

Slide 21 text

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> ……

Slide 22

Slide 22 text

Typography Theming の適用

Slide 23

Slide 23 text

Typography Theming の適用 Headline6 Subtitle1 Button

Slide 24

Slide 24 text

Before / After

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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