android-11-meetups-review-material-design

Slide 1

Slide 1 text

Jetpack Composeに備えて Material Design対応をおさらいする Ayako Morimoto / moriiimo Android Engineer DMM.com LLC

Slide 2

Slide 2 text

11 weeks of AndroidのUIの回で、ついにJetpack Compose alpha版が発表された Jetpack Compose Alpha それに合わせて、 Material Design への対応をあらためて開発者に呼びかけている https://android-developers.googleblog.com/2020/08/11-weeks-of-android-ui-and-compose.html

Slide 3

Slide 3 text

Jetpack ComposeではMaterial Designのコンセプト、用語、　　　コンポーネントを引き継いでいる Material Designと Jetpack Compose https://github.com/material-components/material-components-android-compose-theme-adapter 実装のサポートとして、 xmlで定義されている Material ThemeをJetpack Composeの Material Themeとして再利用できるMDC-Android Compose Theme Adapter も用意されている Material Theme 設定を適切に実装をしておくことがスムーズな移行に重要

Slide 4

Slide 4 text

Material Theme設定のおさらい今回お話することまとめ Color, Type, Shapeの Material Theme 設定では、どのような部分に注意しておけばよいか Color, Type, Shape の Theme 設定 ThemeとStyleの関係をおさらいし、全体としてどのようなリソース設計をしておけばよいか Q1 Q2 Q3

Slide 5

Slide 5 text

Material Theme 設定のおさらい

Slide 6

Slide 6 text

Theme と Style はどちらもタグを利用して宣言する ThemeとStyleの違いは利用方法 https://chris.banes.dev/2014/11/12/theme-vs-style/ https://chris.banes.dev/talks/2019/developing-themes-with-style-berlin/ Style? Theme?

Slide 7

Slide 7 text

Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleの利用用途

Slide 8

Slide 8 text

Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleは、Viewの属性をまとめて設定するので、 Styleの利用用途

Slide 9

Slide 9 text

Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleは、Viewの属性をまとめて設定するので、 - Theme attributeに適用するViewの属性をまとめる Styleの利用用途

Slide 10

Slide 10 text

Viewの属性に対して、 Styleの設定

Slide 11

Slide 11 text

Styleの設定 Color, Float, String ... Viewの属性に対して、 - Color, Float, Stringなど具体的な値

Slide 12

Slide 12 text

Styleの設定 Color, Float, String ... Viewの属性に対して、 - Color, Float, Stringなど具体的な値 - Theme attributeへの参照 Theme attribute

Slide 13

Slide 13 text

特定のViewの共通化として作成した Styleは、レイアウトに直接設定 Styleの設定

Slide 14

Slide 14 text

Theme attributeに適用するViewの属性をまとめるものとして作成した Styleは、 Themeの属性に設定 Styleの設定

Slide 15

Slide 15 text

コンテキストに結び付き、主に Application（Activityも可）に適用するもの - アプリや画面のデザインソース Themeの利用用途 https://material.io/design/material-studies/owl.html

Slide 16

Slide 16 text

Themeの属性（タグで定義されているもの）に対して、 Themeの設定 https://github.com/aosp-mirror/platform_frameworks_base/blob/master/core/res/res/values/attrs.xml

Slide 17

Slide 17 text

Themeの属性（タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 Themeの設定 Color, Float, String ...

Slide 18

Slide 18 text

Themeの属性（タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 - Styleへの参照 Themeの設定 Color, Float, String ... Style

Slide 19

Slide 19 text

Themeの属性（タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 - Styleへの参照 - Themeの属性をまとめた定義への参照 Themeの設定 Color, Float, String ... Style Theme属性をまとめた定義への参照

Slide 20

Slide 20 text

作成したThemeは、主にApplicationに設定 Themeの設定

Slide 21

Slide 21 text

ThemeOverlayは、Themeを引き継ぎつつ特定の画面に変更を適用できる ThemeOverlayについて https://material.io/design/material-studies/owl.html

Slide 22

Slide 22 text

parentに何も設定せず、ThemeOverlayから始まる定義を作成する ThemeOverlayの設定

Slide 23

Slide 23 text

parentに何も設定せず、ThemeOverlayから始まる定義を作成する - 変更点のみを再定義 ThemeOverlayの設定

Slide 24

Slide 24 text

作成したThemeOverlayは、Themeと同じくコンテキストに結び付き、適用範囲は同じだが主にViewGroupに設定 ThemeOverlayの設定

Slide 25

Slide 25 text

ThemeをApplicationに設定特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定リソース設計の全体像

Slide 26

Slide 26 text

ThemeをApplicationに設定特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定 Themeはデザインソースとなるために color、type、shapeなどの設定を持つ Viewからデザインソースにアクセスする場合は Themeの属性を通すリソース設計の全体像

Slide 27

Slide 27 text

ThemeをApplicationに設定特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定 Themeはデザインソースとなるために color、type、shapeなどの設定を持つ Viewからデザインソースにアクセスする場合は Themeの属性を通す特定のViewを共通化するStyleを定義する場合は全体とは切り離すリソース設計の全体像

Slide 28

Slide 28 text

Color, Type, Shape のTheme 設定

Slide 29

Slide 29 text

Color 設定

Slide 30

Slide 30 text

Themeには、color attributeとして 12種類が定義されている Material Design Colors https://gist.github.com/ricknout/32e63cf6d80b29f314c2dd0c96cdc1e1#file-mdc_color_attrs_sources-md https://medium.com/androiddevelopers/material-theming-with-mdc-color-860dbba8ce2f

Slide 31

Slide 31 text

Themeには、color attributeとして 12種類が定義されている Material Design Colors color リソースや ColorStateListをThemeのattributeに設定参照は、Themeを通して行う https://gist.github.com/ricknout/32e63cf6d80b29f314c2dd0c96cdc1e1#file-mdc_color_attrs_sources-md https://medium.com/androiddevelopers/material-theming-with-mdc-color-860dbba8ce2f

Slide 32

Slide 32 text

すべてを設定する必要はないが、正しく使う為にどこで利用されるかを確認 Material Design Colors https://gist.github.com/ricknout/32e63cf6d80b29f314c2dd0c96cdc1e1#file-mdc_color_attrs_sources-md https://medium.com/androiddevelopers/material-theming-with-mdc-color-860dbba8ce2f primary … ブランドのメイン secondary … ブランドのアクセント ○○variant … ○○のバリエーション background … 背景 surface … card、sheet、menuなど、View（コンポーネント）の表面 error … エラー on○○… textやiconなど、○○の上に表示される要素

Slide 33

Slide 33 text

12種類以外のcolorがある場合はどうする？ Custom Color attributeにないcolorをcolor.xmlに定義して `@color/star` のように直接参照してもよいか OK？

Slide 34

Slide 34 text

Themeへの追加は、custom attribute を　　　　作ることで簡単に行える Custom ColorもThemeに　　追加するたとえ一部の機能でしか利用しないとしても、　ブランドの世界観の一部であるなら Themeに　　設定したほうがよさそう OK

Slide 35

Slide 35 text

OK？ colorに意味は必要か？ colorの命名

Slide 36

Slide 36 text

color.xmlでは、意味のある命名ではなく色をそのまま表す命名にする意味はThemeで示せる NG OK

Slide 37

Slide 37 text

alpha値のあるcolorは、color.xmlに定義するべきか？ alpha値のあるColorの定義 OK？

Slide 38

Slide 38 text

alpha値をcolor.xmlに定義して利用するのではなく、 ColorStateListを作成してalpha値を設定する ColorStateListを使う OK NG gray_100_alpha12.xml

Slide 39

Slide 39 text

設定はandroid:backgroundTintで行う ColorStateListを使う https://www.droidcon.com/media-detail?video=352671629 android:backgroundには明らかに未設定とわかるようなdrawableやcolorを設定しておくことで設定漏れを防ぐ（droidconでtipsとして紹介されている）

Slide 40

Slide 40 text

Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする Color設定のまとめ

Slide 41

Slide 41 text

Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideするブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える Color設定のまとめ

Slide 42

Slide 42 text

Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideするブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える color.xmlでは色そのものを表す命名を心がける - それによって直接参照の違和感に気づきやすくなる Color設定のまとめ

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Type 設定

Slide 45

Slide 45 text

Themeには、TypeAttributeとして 13種類が定義されている Material Design Types https://gist.github.com/ricknout/c9f9adaf73565e20058ca4c716421666

Slide 46

Slide 46 text

Themeには、TypeAttributeとして 13種類が定義されている Material Design Types https://gist.github.com/ricknout/c9f9adaf73565e20058ca4c716421666 TextAppearance.MaterialComponents.Headline1など対応するTextAppearanceを継承したstyleを　作る Themeのattributeに設定 TextViewなどからの参照は、 Themeを通して行う

Slide 47

Slide 47 text

定義ごとの役割を意識する Material Design Types textAppearanceHeadline … 見出し textAppearanceSubtitle … 補助的な見出し textAppearanceBody … 本文 textAppearanceButton … ボタンのほか、タブやダイアログのアクション textAppearanceCaption … 注意書きやエラー、 hint textなど textAppearanceOverline … captionよりも小さなtextなど基本はデザインによって変更してよいが、 Subtitle 、Body、 Overline などでは、表現力のあるフォントを利用するのは読みづらさにつながってしまうため、非推奨となっている

Slide 48

Slide 48 text

TextAppearanceで扱うべき属性は何が望ましいか TypeAttributeに設定する TextAppearanceの範囲 fontFamily android:textColor android:letterSpacing android:textAllCaps android:textFontWeight android:textStyle など

Slide 49

Slide 49 text

そのtypeがどんなシーンで使われても変更がないような属性は定義する font、size、styleなどは定義する OK

Slide 50

Slide 50 text

colorはViewのstyle側に設定するのが望ましい colorは分ける https://medium.com/androiddevelopers/material-theming-with-mdc-type-8c2013430247 NG OK 例えば、textAppearanceCaptionというTypeAttribute は、errorやhintで利用される属性利用画面によって最適な colorは異なる

Slide 51

Slide 51 text

Textの読みやすさを考える Text legibility https://material.io/design/color/text-legibility.html Material Designではすべてのテキストは読みやすく、アクセシビリティが考慮されているべきとしている textに適切な透過を与えることでコントラストを改善し読みやすくする

Slide 52

Slide 52 text

Text legibility https://material.io/design/color/text-legibility.html https://github.com/material-components/material-components-android/blob/master/lib/java/com/goo gle/android/material/color/res/color/material_on_background_emphasis_high_type.xml Material Designのサイトでは、どの状況にどんな透過度を設定するべきかが示されている Color 設定で触れたColorStateListを定義してもよい Material Design の Library内にText legibilityが反映されたColor State Listが用意されているので、そちらを活用するのもよい

Slide 53

Slide 53 text

Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする Type設定のまとめ

Slide 54

Slide 54 text

Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideするデザインによってoverrideしてよいが、ユーザーに必要な情報が伝わるように意識する Type設定のまとめ

Slide 55

Slide 55 text

Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideするデザインによってoverrideしてよいが、ユーザーに必要な情報が伝わるように意識する TextAppearanceに設定するattributeは利用画面で変化しないもののみにする - 例えば、色は利用画面によって変化しやすいため TextAppearanceでの設定には適さない Type設定のまとめ

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Shape 設定

Slide 58

Slide 58 text

Themeには、ShapeAttributeとして3種類が定義されている Material Design Shapes shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent https://material.io/design/shape/applying-shape-to-ui.html

Slide 59

Slide 59 text

Material Designでは、Widgetを3つのカテゴリに分け、一括で形状変更を適用できるようにしている Material Design Shapes 実装時は “component” と呼ばれるデフォルトは下記 shapeAppearanceSmallComponent … roundの4dp shapeAppearanceMediumComponent … roundの4dp shapeAppearanceLargeComponent … roundの0dp https://material.io/design/shape/applying-shape-to-ui.html

Slide 60

Slide 60 text

一括で設定することで、異なる Widgetにも統一感をもたせている componentを利用した例 Material Designのshrineの例では各componentに `cut` を設定している https://material.io/design/material-studies/shrine.html

Slide 61

Slide 61 text

Widgetのbackgroundに独自定義したshape を設定する？ Widgetの形状を変えたい OK？ shape__round_rect_view.xml

Slide 62

Slide 62 text

Widgetのbackgroundに独自定義したshape を設定していくと、Widgetの分だけshape用のファイルが増える可能性が　　あり、増えた分だけ管理が難しくなるなるべくshapeAppearanceを利用する NG shape__round_rect_view.xml

Slide 63

Slide 63 text

デザインの段階で各 componentにどのようなWidgetが属しているか把握し、全体を決めるデザイナーとよく話し合い、ブランドの世界観に沿って形状の原則を決めておくとよさそうなるべくshapeAppearanceを利用する

Slide 64

Slide 64 text

ShapeAppearanceOverlayを作成し、 Themeに設定するなるべくshapeAppearanceを利用する ThemeにあるそれぞれのWidgetのstyleに shapeAppearanceOverlayで独自に定義したstyleを設定する small componentsに属するchipやﬂoating action buttonはそのような実装になっている https://material.io/develop/android/theming/shape

Slide 65

Slide 65 text

個別に設定したい場合はレイアウトで設定するなるべくshapeAppearanceを利用する https://material.io/develop/android/theming/shape app:shapeAppearanceOverlayタグを利用する

Slide 66

Slide 66 text

Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する Shape設定のまとめ

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する shape用のxmlはなるべく利用せず、 shapeAppearanceで対応する - デザイナーと初期段階で各 component毎の基本方針を決められるのが理想特定のWidgetの形状を変えたい場合は shapeAppearanceOverlayで対応する - Widget全体の形状を変える方法と、特定の Widgetのみ形状を変える方法が利用できる Shape設定のまとめ

Slide 69

Slide 69 text

まとめ

Slide 70

Slide 70 text

ThemeとStyleを意識して使い分けよう Material Design対応のために Themeはデザインソース Styleは特定のViewの共通化、Theme attributeに適用するViewの属性をまとめるもの利用用途を意識して参照関係を整える

Slide 71

Slide 71 text

Color, Type, ShapeもThemeに紐付けよう Material Design対応のために color attribute、type attribute、shape attributeを利用して、Themeを最大限に活用する

Slide 72

Slide 72 text

ありがとうございました