Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Let's use Material Theming
Nabe
February 15, 2019
Design
0
730
Let's use Material Theming
https://mobileact.connpass.com/event/114158/
Nabe
February 15, 2019
Tweet
Share
More Decks by Nabe
See All by Nabe
numeroanddev
0
210
numeroanddev
0
460
numeroanddev
1
330
numeroanddev
0
330
numeroanddev
2
380
Other Decks in Design
See All in Design
nodoka
2
170
tamadama
0
540
ajanart
0
360
nobtak
0
350
rvillarreal
0
130
sergkuniva
0
570
gavaru
0
210
mariannasmith
0
110
waaakameeee
1
1.3k
isabellaspadone
0
160
koeri
0
510
tiagilles
0
160
Featured
See All Featured
lauravandoore
11
1.2k
kastner
54
1.9k
bkeepers
52
4.1k
colly
66
3k
62gerente
587
200k
roundedbygravity
241
21k
tanoku
258
24k
lynnandtonic
270
16k
moore
125
21k
chriscoyier
145
19k
lauravandoore
437
28k
smashingmag
283
47k
Transcript
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 の適用 <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>
Color Theming の適用
Color Theming の適用 colorPrimary colorPrimary colorPrimaryVariant colorSecondary colorSurface
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>
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 の適用 <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> ……
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