Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

android-11-meetups-review-material-design

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

moriiimo

September 29, 2020
Tweet

More Decks by moriiimo

Other Decks in Programming

Transcript

  1. 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
  2. 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 設定を適切に実装をしておくこと がスムーズな移行に重要
  3. Material Theme設定の おさらい 今回お話すること まとめ Color, Type, Shapeの Material Theme

    設定では、 どのような部分に注意してお けばよいか Color, Type, Shape の Theme 設定 ThemeとStyleの関係をおさら いし、全体としてどのようなリ ソース設計をしておけばよい か Q1 Q2 Q3
  4. 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
  5. すべてを設定する必要はないが、正しく使う為に どこで利用されるかを確認 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など、◦◦の上に表示される要素
  6. Themeにあるcolor attributeの12種類を把握する - ブランドと照らし合わせ、必要な部分を意識して overrideする ブランドの独自カラーも custom attributeを利用してThemeから参照する - 利用シーンが限定的だとしてもブランドの一部として考える

    color.xmlでは色そのものを表す命名を心がける - それによって直接参照の違和感に気づきやすくなる alpha値のある色はcolorStateListを利用する Color設定のまとめ
  7. 定義ごとの役割を意識する Material Design Types textAppearanceHeadline … 見出し textAppearanceSubtitle … 補助的な見出し

    textAppearanceBody … 本文 textAppearanceButton … ボタンのほか、タブやダイアログの アクション textAppearanceCaption … 注意書きやエラー、 hint textなど textAppearanceOverline … captionよりも小さなtextなど 基本はデザインによって変更してよいが、 Subtitle 、Body、 Overline などでは、表現力のあるフォントを利用するのは読み づらさにつながってしまうため、非推奨となっている
  8. 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
  9. Themeにあるshape attributeの3種類を把握する - 各shape attributeに対応するcomponentsにどのようなWidgetが紐付いているかも意識する shape用のxmlはなるべく利用せず、 shapeAppearanceで対応する - デザイナーと初期段階で各 component毎の基本方針を決められるのが理想

    特定のWidgetの形状を変えたい場合は shapeAppearanceOverlayで対応する - Widget全体の形状を変える方法と、特定の Widgetのみ形状を変える方法が利用できる Shape設定のまとめ