Upgrade to Pro — share decks privately, control downloads, hide ads and more …

android-11-meetups-review-material-design

0f9e5363528f70e1b274f24ada191eb8?s=47 moriiimo
September 29, 2020

 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

0f9e5363528f70e1b274f24ada191eb8?s=128

moriiimo

September 29, 2020
Tweet

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. ありがとうございました