android-11-meetups-review-material-design

Android 11 meetups 第8回 UI・デザイン 「Jetpack Composeに備えてMaterial Design対応をおさらいする」のスライドです

サンプルはこちらから
https://github.com/moriiimo/theme

Android 11 meetups
https://developersonair.withgoogle.com/events/a11meetups-jp

Transcript

1. Jetpack Composeに備えて Material Design対応を おさらいする Ayako Morimoto / moriiimo Android Engineer DMM.com LLC
2. 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
3. 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 設定を適切に実装をしておくこと がスムーズな移行に重要
4. Material Theme設定の おさらい 今回お話すること まとめ Color, Type, Shapeの Material Theme 設定では、 どのような部分に注意してお けばよいか Color, Type, Shape の Theme 設定 ThemeとStyleの関係をおさら いし、全体としてどのようなリ ソース設計をしておけばよい か Q1 Q2 Q3
5. Material Theme 設定のおさらい
6. Theme と Style はどちらも <style></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?
7. Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleの利用用途
8. Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleは、Viewの属性をまとめて設定するので、 Styleの利用用途
9. Styleは、Viewに結び付き、Viewに適用するもの - 特定のViewの共通化 Styleは、Viewの属性をまとめて設定するので、 - Theme attributeに適用するViewの属性をまとめる Styleの利用用途
10. Viewの属性に対して、 Styleの設定
11. Styleの設定 Color, Float, String ... Viewの属性に対して、 - Color, Float, Stringなど具体的な値
12. Styleの設定 Color, Float, String ... Viewの属性に対して、 - Color, Float, Stringなど具体的な値 - Theme attributeへの参照 Theme attribute
13. 特定のViewの共通化として作成した Styleは、レイアウトに直接設定 Styleの設定
14. Theme attributeに適用するViewの属性をまとめるものとして作成した Styleは、 Themeの属性に設定 Styleの設定
15. コンテキストに結び付き、主に Application（Activityも可）に 適用するもの - アプリや画面のデザインソース Themeの利用用途 https://material.io/design/material-studies/owl.html
16. Themeの属性（<attr>タグで定義されているもの）に対して、 Themeの設定 https://github.com/aosp-mirror/platform_frameworks_base/blob/master/core/res/res/values/attrs.xml
17. Themeの属性（<attr>タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 Themeの設定 Color, Float, String ...
18. Themeの属性（<attr>タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 - Styleへの参照 Themeの設定 Color, Float, String ... Style
19. Themeの属性（<attr>タグで定義されているもの）に対して、 - Color, Float, Stringなど具体的な値 - Styleへの参照 - Themeの属性をまとめた定義への参照 Themeの設定 Color, Float, String ... Style Theme属性をまとめた定義への 参照
20. 作成したThemeは、主にApplicationに設定 Themeの設定
21. ThemeOverlayは、Themeを引き継ぎつつ 特定の画面に変更を適用できる ThemeOverlayについて https://material.io/design/material-studies/owl.html
22. parentに何も設定せず、ThemeOverlayから始まる定義を作成する ThemeOverlayの設定
23. parentに何も設定せず、ThemeOverlayから始まる定義を作成する - 変更点のみを再定義 ThemeOverlayの設定
24. 作成したThemeOverlayは、Themeと同じくコンテキストに結び付き、適用範囲は同じだが 主にViewGroupに設定 ThemeOverlayの設定
25. ThemeをApplicationに設定 特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定 リソース設計の全体像
26. ThemeをApplicationに設定 特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定 Themeはデザインソースとなるために color、type、shapeなどの設定を持つ Viewからデザインソースにアクセスする場合は Themeの属性を通す リソース設計の全体像
27. ThemeをApplicationに設定 特定の画面でデザインを変更する場合は ThemeOverlayをViewGroupに設定 Themeはデザインソースとなるために color、type、shapeなどの設定を持つ Viewからデザインソースにアクセスする場合は Themeの属性を通す 特定のViewを共通化するStyleを定義する場合は 全体とは切り離す リソース設計の全体像
28. Color, Type, Shape のTheme 設定
29. Color 設定
30. 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
31. 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
32. すべてを設定する必要はないが、正しく使う為に どこで利用されるかを確認 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など、◦◦の上に表示される要素
33. 12種類以外のcolorがある場合はどうする？ Custom Color attributeにないcolorをcolor.xmlに定義して `@color/star` のように直接参照してもよいか OK？
34. Themeへの追加は、custom attribute を　　　　作る ことで簡単に行える Custom ColorもThemeに　　追 加する たとえ一部の機能でしか利用しないとしても、　ブランド の世界観の一部であるなら Themeに　　設定したほう がよさそう OK
35. OK？ colorに意味は必要か？ colorの命名
36. color.xmlでは、意味のある命名ではなく色をそのまま表す命名にする 意味はThemeで示せる NG OK
37. alpha値のあるcolorは、color.xmlに定義するべきか？ alpha値のあるColorの定義 OK？
38. alpha値をcolor.xmlに定義して利用するのではなく、 ColorStateListを作成してalpha値を設定する ColorStateListを使う OK NG gray_100_alpha12.xml
39. 設定はandroid:backgroundTintで行う ColorStateListを使う https://www.droidcon.com/media-detail?video=352671629 android:backgroundには明らかに未設定とわかるよう なdrawableやcolorを設定しておくことで設定漏れを防 ぐ （droidconでtipsとして紹介されている）
40. Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする Color設定のまとめ
41. Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする ブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える Color設定のまとめ
42. Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする ブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える color.xmlでは色そのものを表す命名を心がける - それによって直接参照の違和感に気づきやすくなる Color設定のまとめ
43. Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする ブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える color.xmlでは色そのものを表す命名を心がける - それによって直接参照の違和感に気づきやすくなる alpha値のある色はcolorStateListを利用する Color設定のまとめ
44. Type 設定
45. Themeには、TypeAttributeとして 13種類が定義されている Material Design Types https://gist.github.com/ricknout/c9f9adaf73565e20058ca4c716421666
46. Themeには、TypeAttributeとして 13種類が定義されている Material Design Types https://gist.github.com/ricknout/c9f9adaf73565e20058ca4c716421666 TextAppearance.MaterialComponents.Headline1な ど対応するTextAppearanceを継承したstyleを　作る Themeのattributeに設定 TextViewなどからの参照は、 Themeを通して行う
47. 定義ごとの役割を意識する Material Design Types textAppearanceHeadline … 見出し textAppearanceSubtitle … 補助的な見出し textAppearanceBody … 本文 textAppearanceButton … ボタンのほか、タブやダイアログの アクション textAppearanceCaption … 注意書きやエラー、 hint textなど textAppearanceOverline … captionよりも小さなtextなど 基本はデザインによって変更してよいが、 Subtitle 、Body、 Overline などでは、表現力のあるフォントを利用するのは読み づらさにつながってしまうため、非推奨となっている
48. TextAppearanceで扱うべき属性は 何が望ましいか TypeAttributeに設定する TextAppearanceの範囲 fontFamily android:textColor android:letterSpacing android:textAllCaps android:textFontWeight android:textStyle など
49. そのtypeがどんなシーンで使われても 変更がないような属性は定義する font、size、styleなどは定義する OK
50. colorはViewのstyle側に 設定するのが望ましい colorは分ける https://medium.com/androiddevelopers/material-theming-with-mdc-type-8c2013430247 NG OK 例えば、textAppearanceCaptionというTypeAttribute は、errorやhintで利用される属性 利用画面によって最適な colorは異なる
51. Textの読みやすさを考える Text legibility https://material.io/design/color/text-legibility.html Material Designではすべてのテキストは読みやすく、 アクセシビリティが考慮されているべきとしている textに適切な透過を与えることでコントラストを改善し読 みやすくする
52. 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が用意されているので、そちらを活用す るのもよい
53. Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする Type設定のまとめ
54. Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする デザインによってoverrideしてよいが、ユーザーに必要な情報が伝わるように意識する Type設定のまとめ
55. Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする デザインによってoverrideしてよいが、ユーザーに必要な情報が伝わるように意識する TextAppearanceに設定するattributeは利用画面で変化しないもののみにする - 例えば、色は利用画面によって変化しやすいため TextAppearanceでの設定には適さない Type設定のまとめ
56. Themeにあるtype attributeの13種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする デザインによってoverrideしてよいが、ユーザーに必要な情報が伝わるように意識する TextAppearanceに設定するattributeは利用画面で変化しないもののみにする - 例えば、色は利用画面によって変化しやすいため TextAppearanceでの設定には適さない Text legibilityを意識する - textに適切な透過を与えることでコントラストが改善され読みやすくなる Type設定のまとめ
57. Shape 設定
58. Themeには、ShapeAttributeとして3種類が 定義されている Material Design Shapes shapeAppearanceSmallComponent shapeAppearanceMediumComponent shapeAppearanceLargeComponent https://material.io/design/shape/applying-shape-to-ui.html
59. 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
60. 一括で設定することで、異なる Widgetにも 統一感をもたせている componentを利用した例 Material Designのshrineの例では各componentに `cut` を設定している https://material.io/design/material-studies/shrine.html
61. Widgetのbackgroundに独自定義したshape を設定する？ Widgetの形状を変えたい OK？ shape__round_rect_view.xml
62. Widgetのbackgroundに独自定義したshape を設定していくと、Widgetの分だけshape用 のファイルが増える可能性が　　あり、増えた 分だけ管理が難しくなる なるべくshapeAppearanceを 利用する NG shape__round_rect_view.xml
63. デザインの段階で各 componentに どのようなWidgetが属しているか把握し、全体 を決める デザイナーとよく話し合い、ブランドの世界観に沿って 形状の原則を決めておくとよさそう なるべくshapeAppearanceを 利用する
64. ShapeAppearanceOverlayを作成し、 Themeに設定する なるべくshapeAppearanceを 利用する ThemeにあるそれぞれのWidgetのstyleに shapeAppearanceOverlayで独自に定義したstyleを設 定する small componentsに属するchipやfloating action buttonはそのような実装になっている https://material.io/develop/android/theming/shape
65. 個別に設定したい場合はレイアウトで 設定する なるべくshapeAppearanceを 利用する https://material.io/develop/android/theming/shape app:shapeAppearanceOverlayタグを利用する
66. Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する Shape設定のまとめ
67. Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する shape用のxmlはなるべく利用せず、 shapeAppearanceで対応する - デザイナーと初期段階で各 component毎の基本方針を決められるのが理想 Shape設定のまとめ
68. Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する shape用のxmlはなるべく利用せず、 shapeAppearanceで対応する - デザイナーと初期段階で各 component毎の基本方針を決められるのが理想 特定のWidgetの形状を変えたい場合は shapeAppearanceOverlayで対応する - Widget全体の形状を変える方法と、特定の Widgetのみ形状を変える方法が利用できる Shape設定のまとめ
69. まとめ
70. ThemeとStyleを意識して使い分けよう Material Design対応のために Themeはデザインソース Styleは特定のViewの共通化、Theme attributeに適 用するViewの属性をまとめるもの 利用用途を意識して参照関係を整える
71. Color, Type, ShapeもThemeに紐付けよう Material Design対応のために color attribute、type attribute、shape attributeを 利用して、Themeを最大限に活用する
72. ありがとうございました