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

Material Design Components カスタマイズ最前線

Yuki Anzai
October 17, 2020

Material Design Components カスタマイズ最前線

Yuki Anzai

October 17, 2020
Tweet

More Decks by Yuki Anzai

Other Decks in Technology

Transcript

  1. Material Design Components
    カスタマイズ最前線
    あんざいゆき(@yanzm)
    Google Developer Experts for Android

    View full-size slide

  2. Material Design Components
    • Material Design が提唱している⾊や形、タイポグラフィ、アニメーション
    を使ったコンポーネントが実装されているライブラリ
    • https://material.io/
    • MDCに実装されているコンポーネントを使うには MDC のテーマを使う必要
    がある
    implementation "com.google.android.material:material:1.2.1"

    View full-size slide

  3. MDC のテーマを使う

    View full-size slide

  4. MDC のテーマ
    Bridge
    Theme.MaterialComponents.Bridge
    Theme.MaterialComponents.Light.Bridge
    Theme.MaterialComponents.Light.DarkActionBar.Bridge
    Theme.MaterialComponents.DayNight
    non-Bridge
    Theme.MaterialComponents
    Theme.MaterialComponents.Light
    Theme.MaterialComponents.Light.DarkActionBar
    Theme.MaterialComponents.DayNight
    コンポーネントに
    デフォルトで MDC の style
    が適⽤される
    デフォルトでは
    AppCompat と同じ⾒た⽬
    non-Bridge と同じ⾒た⽬に
    するならコンポーネントに
    MDC の style を明⽰的に
    適⽤する必要がある

    View full-size slide

  5. MDC のテーマ
    • 新規プロジェクト
    • non-Bridge の MDC テーマをベーステーマにする
    • 既存プロジェクトの移⾏
    • ベーステーマを non-Bridge の MDC テーマに変更すると影響が⼤きい
    ので、Bridge をベーステーマにして少しずつ設定を追加する
    • 最終的には Theme.MaterialComponents をベーステーマにする

    View full-size slide

  6. Bridge をベーステーマにする
    <br/>...<br/>
    parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
    ...

    AppCompat や MaterialComponents のネーミングルールに合わせて
    Theme.[MyApp].... という名前にするのがおすすめ

    View full-size slide

  7. Bridge での設定
    • MDC の style を設定しない → AppCompat と同じ
    android:id="@+id/textInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_name">
    ...

    View full-size slide

  8. Bridge での設定
    • MDC の style を設定しない → AppCompat と同じ
    • MDC の style を設定 → MaterialComponents と同じ
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_name">
    ...

    View full-size slide

  9. <br/><item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item><br/>
    Bridge での設定
    • MDC の style を設定しない → AppCompat と同じ
    • MDC の style を設定 → MaterialComponents と同じ

    View full-size slide

  10. TextInputLayout
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .TextInputLayout
    .FilledBox
    エラー
    MaterialComponents
    エラー
    Widget.MaterialComponents
    .TextInputLayout
    .OutlinedBox

    View full-size slide

  11. MDC の Color 属性

    View full-size slide

  12. colorAccent
    colorPrimaryDark
    colorPrimary
    AppCompat
    colorError
    android:colorBackground
    colorControlNormal

    View full-size slide

  13. AppCompat
    colorError
    android:colorBackground
    テーマ継承による引き継ぎ
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    MaterialComponents.Bridge
    colorControlNormal

    View full-size slide

  14. colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    AppCompat MaterialComponents.Bridge MaterialComponents
    android:colorBackground
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ

    View full-size slide

  15. colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    AppCompat MaterialComponents.Bridge MaterialComponents
    android:colorBackground
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    MDC で使われる Color

    View full-size slide

  16. #303030
    #FF7043
    #FFFFFF
    #000000
    android:colorBackground
    #121212
    #FFFFFF
    #FFFFFF
    #121212
    #121212
    #000000
    #000000
    #03DAC6
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    AppCompat MaterialComponents.Bridge MaterialComponents
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    #212121
    #000000
    #FF7043
    #FAFAFA
    #CF6679
    #3700B3
    #03DAC6
    #000000
    #212121
    #FFFFFF
    #3700B3
    #000000
    #FFFFFF
    Dark theme
    #000000
    #BA86FC
    #000000
    #03DAC6
    #03DAC6
    #121212
    #FFFFFF
    #121212

    View full-size slide

  17. #303030
    #FF7043
    #FFFFFF
    #000000
    android:colorBackground
    #121212
    #FFFFFF
    #FFFFFF
    #121212
    #121212
    #000000
    #000000
    #03DAC6
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    #212121
    #000000
    #FF7043
    #FAFAFA
    #CF6679
    #3700B3
    #03DAC6
    #000000
    #212121
    #FFFFFF
    #3700B3
    #000000
    #FFFFFF
    Dark theme
    #000000
    #BA86FC
    #000000
    #03DAC6
    #03DAC6
    #121212
    #FFFFFF
    #121212
    AppCompat MaterialComponents.Bridge MaterialComponents

    View full-size slide

  18. #212121
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    #f5f5f5
    #757575
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    Light theme
    #f5f5f5 #6200EE
    #3700B3
    AppCompat.Light MaterialComponents.Light.Bridge MaterialComponents.Light

    View full-size slide

  19. #212121
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    #f5f5f5
    #757575
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    Light theme
    #f5f5f5 #6200EE
    #3700B3
    AppCompat.Light MaterialComponents.Light.Bridge MaterialComponents.Light

    View full-size slide

  20. #212121
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    attr 参照
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    テーマ継承による引き継ぎ
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    Light theme
    #000000
    #212121
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc

    View full-size slide

  21. #212121
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    Light theme
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc

    View full-size slide

  22. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    colorOnPrimary
    colorOnSecondary
    colorOnPrimarySurface
    colorOnSurface
    colorOnError
    colorOnBackground

    View full-size slide

  23. • ColorXX 上の⽂字⾊やアイコンのTintに使われる
    colorPrimary
    colorSecondary
    colorPrimarySurface
    colorSurface
    colorError
    android:colorBackground
    #ffffff
    #000000
    #ffffff
    #000000
    #ffffff
    #000000
    ColorOnXX
    Android
    Android
    Android
    Android
    Android
    colorOnPrimary
    colorOnSecondary
    colorOnPrimarySurface
    colorOnSurface
    colorOnError
    colorOnBackground
    Android
    #212121
    #03DAC6
    #212121
    #FFFFFF
    #FF5722
    #FAFAFA
    MaterialComponents.Light.DarkActionBar.Bridge

    View full-size slide

  24. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    colorPrimarySurface
    colorOnPrimarySurface

    View full-size slide

  25. PrimarySurface
    • Light theme では Primary、Dark theme では Surface を参照するよう
    になっているColor属性
    (Light Theme)
    Theme.MaterialComponents.Light
    Theme.MaterialComponents.Light
    .DarkActionBar
    (Dark Theme)
    Theme.MaterialComponents
    colorPrimarySurface ?attr/colorPrimary ?attr/colorSurface
    colorOnPrimarySurface ?attr/colorOnPrimary ?attr/colorOnSurface

    View full-size slide

  26. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    colorSurface
    colorOnSurface

    View full-size slide

  27. • パネル的なコンポーネントの⾊に使われる
    • MaterialCardView, NavigationView, BottomNavigationView,
    BottomAppBar, TabLayout, PopupMenu,
    AlertDialog(MaterialAlertDialogBuilder)などの表⾯の⾊
    colorSurface

    View full-size slide

  28. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    colorError
    colorOnError

    View full-size slide

  29. colorError
    • エラー⽤の⽂字⾊やアイコンの Tint に使われる
    • TextInputLayout のエラー時の⽂字⾊やアイコンの⾊、
    BottomNavigationView で使われる BadgeDrawable の⾊

    View full-size slide

  30. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    android:colorBackground
    colorOnBackground

    View full-size slide

  31. • window の背景に使われる
    • Theme.Material, Theme.Material.Light で
    android:windowBackground に指定されている
    android:colorBackground
    ?attr/colorBackground
    android:colorBackground
    #FFFFFF
    Theme.MaterialComponents.Light.DarkActionBar
    Theme.MaterialComponents.Light.DarkActionBar.Bridge
    android:colorBackground
    #FAFAFA

    View full-size slide

  32. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    colorControlNormal

    View full-size slide

  33. • AppCompat からある属性
    • App bar の Navigation icon, Overflow icon の Tint として使われる
    • MDC の ActionBar, BottomAppBar, Toolbar ⽤の style では上書き指定されている
    • App bar の Menu icon に指定する vector drawable は tint に colorControlNormal
    を指定する
    colorControlNormal
    android:width="24dp"
    android:height="24dp"
    android:tint="?attr/colorControlNormal"
    android:viewportWidth="24"
    android:viewportHeight="24">


    View full-size slide

  34. MDC の Color 属性の利⽤

    View full-size slide

  35. MDC ⽤ Color 属性の利⽤
    colorPrimary : alpha 100%
    colorOnSurface : alpha 42%
    colorError : alpha 100%
    TextInputLayout.FilledBox
    MaterialComponents.Light.DarkActionBar.Bridge
    colorOnSurface : alpha 12%

    View full-size slide

  36. https://material.io/develop/android/components/text-fields

    View full-size slide

  37. parent="Base.Widget.MaterialComponents.TextInputLayout">
    ...
    @color/mtrl_filled_background_color
    ...







    mtrl_filled_background_color.xml

    View full-size slide

  38. MDC の Color
    カスタマイズ

    View full-size slide

  39. MDC の Color カスタマイズ
    • テーマの Color 属性値を変更する
    • 全 Component に影響する
    • materialThemeOverlay を指定する
    • Component ⽤の独⾃ style で指定する
    • 独⾃ style を指定した Component にだけ影響する
    ...
    app:colorPrimary="#1976D2">
    <br/><item name="colorPrimary">#1976D2</item><br/>

    View full-size slide

  40. materialThemeOverlay を指定する(1)
    • 独⾃ style のベースにしたい Component の style を調べる

    View full-size slide

  41. materialThemeOverlay を指定する(2)
    • ベースにする style を継承した style を⽤意する
    parent="Widget.MaterialComponents.TextInputLayout.FilledBox">

    View full-size slide

  42. materialThemeOverlay を指定する(3)
    • ベースにする style で materialThemeOverlay が指定されているか調べ

    <br/><item name="materialThemeOverlay"><br/>@style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox<br/></item><br/>...<br/>

    View full-size slide

  43. materialThemeOverlay を指定する(4)
    • ベースにする style で materialThemeOverlay に指定されている
    ThemeOverlay を継承したテーマを⽤意し、Color 属性を上書きする
    parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    #1976D2

    materialThemeOverlay が指定されていないときは parent=""

    View full-size slide

  44. materialThemeOverlay を指定する(4)
    • ベースにする style で materialThemeOverlay に指定されている
    ThemeOverlay を継承したテーマを⽤意し、Color 属性を上書きする
    parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    #1976D2

    materialThemeOverlay が指定されていないときは parent=""

    View full-size slide

  45. materialThemeOverlay を指定する(5)
    • Component ⽤の独⾃ style で、materialThemeOverlay に⽤意した
    ThemeOverlay を指定する
    parent="Widget.MaterialComponents.TextInputLayout.FilledBox">

    @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox


    View full-size slide

  46. materialThemeOverlay を指定する(6-1)
    • Component ⽤の独⾃ style を Component に指定する
    android:id="@+id/textInputLayout"
    style="@style/Widget.MyApp.TextInputLayout.FilledBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_name">

    View full-size slide

  47. materialThemeOverlay を指定する(6-2)
    • Component ⽤の独⾃ style を Component のデフォルト style テーマ属
    性に指定する
    <br/><item name="textInputStyle">@style/Widget.MyApp.TextInputLayout.FilledBox</item><br/>

    View full-size slide

  48. Bridge を使うときの注意点
    - Button -

    View full-size slide

  49. • Bridge と non-Bridge で異なる
    • 実際に⽣成される のインスタンス
    • AppCompat : AppCompatButton
    • MaterialComponents.Bridge : AppCompatButton
    • MaterialComponents : MaterialButton
    • Bridge だと MDC の Button style を指定しても意図した通りにならない
    Button

    View full-size slide

  50. Button
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .Button
    エラー
    MaterialComponents
    エラー
    Widget.MaterialComponents
    .Button
    .OutlinedButton

    View full-size slide

  51. Bridge + MaterialButton
    android:id="@+id/button"
    style="@style/Widget.MaterialComponents.Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/button" />

    View full-size slide

  52. Bridge を使うときの注意点
    - FloatingActionButton -

    View full-size slide

  53. • MDC の style を指定する
    FloatingActionButton

    View full-size slide

  54. FloatingActionButton
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし Widget.MaterialComponents.FloatingActionButton
    エラー
    MaterialComponents

    View full-size slide

  55. Bridge を使うときの注意点
    - CheckBox -

    View full-size slide

  56. • Bridge と non-Bridge で異なる
    • 実際に⽣成される のインスタンス
    • AppCompat : AppCompatCheckBox
    • MaterialComponents.Bridge : AppCompatCheckBox
    • MaterialComponents : MaterialCheckBox
    • Bridge で MDC の CheckBox style を指定すると落ちる
    CheckBox

    View full-size slide

  57. Bridge で MDC の style を適⽤する
    android:id="@+id/checkBox"
    style="@style/Widget.MaterialComponents.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check_box" />
    Crash!
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check_box"
    app:useMaterialThemeColors="true" />

    View full-size slide

  58. CheckBox
    AppCompat
    MaterialComponents
    .Bridge
    CheckBox
    MaterialCheckBox
    +
    useMaterialThemeColors="true"
    MaterialComponents
    エラー
    MaterialCheckBox
    OK
    ?

    View full-size slide

  59. CheckBox
    AppCompat
    MaterialComponents
    .Bridge
    CheckBox
    MaterialCheckBox
    +
    useMaterialThemeColors="true"
    MaterialComponents
    エラー
    MaterialCheckBox
    OK
    colorControlActivated

    View full-size slide

  60. #03DAC6
    #008577
    colorSecondary
    colorControlActivated
    colorAccent
    AppCompat MaterialComponents.Bridge MaterialComponents
    attr 参照
    colorControlActivated
    colorAccent
    テーマ継承による引き継ぎ
    Light.DarkActionBar
    #03DAC6
    #008577 #03DAC6
    colorControlActivated
    colorAccent #008577
    #008577

    View full-size slide

  61. Bridge で MDC と同じ⾒た⽬にする
    <br/><item name="useMaterialThemeColors">true</item><br/><item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item><br/><item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item><br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/>
    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check_box" />

    View full-size slide

  62. Bridge で MDC と同じ⾒た⽬にする
    <br/><item name="useMaterialThemeColors">true</item><br/><item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item><br/><item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item><br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/>
    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check_box" />

    View full-size slide

  63. Bridge で MDC と同じ⾒た⽬にする
    <br/><item name="useMaterialThemeColors">true</item><br/><item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item><br/><item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item><br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/>
    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/check_box" />
    48dp

    View full-size slide

  64. Bridge を使うときの注意点
    - RadioButton -

    View full-size slide

  65. • Bridge と non-Bridge で異なる
    • 実際に⽣成される のインスタンス
    • AppCompat : AppCompatRadioButton
    • MaterialComponents.Bridge : AppCompatRadioButton
    • MaterialComponents : MaterialRadioButton
    • Bridge で MDC の RadioButton style を指定すると落ちる
    RadioButton

    View full-size slide

  66. Bridge で MDC と同じ⾒た⽬にする
    <br/><item name="useMaterialThemeColors">true</item><br/><item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item><br/><item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item><br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.RadioButton</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/>
    android:id="@+id/radiobutton"
    style="@style/Widget.MyApp.CompoundButton.RadioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/radio_button" />

    View full-size slide

  67. Bridge を使うときの注意点
    - Switch -

    View full-size slide

  68. • SwitchMaterial を使う
    • Bridge で MDC の Switch style を指定すると落ちる
    Switch
    (MaterialSwitch じゃないよ!)

    View full-size slide

  69. Bridge で MDC と同じ⾒た⽬にする
    <br/><item name="useMaterialThemeColors">true</item><br/><item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item><br/><item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item><br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/>
    android:id="@+id/switch"
    style="@style/Widget.MyApp.CompoundButton.Switcdh"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/switch" />

    View full-size slide

  70. Bridge を使うときの注意点
    - TextInputLayout -

    View full-size slide

  71. TextInputLayout
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .TextInputLayout
    .FilledBox
    エラー
    MaterialComponents
    エラー
    Widget.MaterialComponents
    .TextInputLayout
    .OutlinedBox

    View full-size slide

  72. Theme.MaterialComponents.Light.DarkActionBar
    Theme.MaterialComponents.Light.DarkActionBar.Bridge
    • Bridge と non-Bridge で error の⾊が異なる
    • Bridge で error の⾊を non-Bridge と同じにするには
    • colorError を指定する or android:theme を指定する
    TextInputLayout

    View full-size slide

  73. <br/><item name="colorError">#B00020</item><br/>
    colorErrorを指定する
    <br/><item name="colorError">@color/design_default_color_error</item><br/>
    or
    #CF6679
    #B00020 Light テーマ : @color/design_default_color_error
    Dark テーマ : @color/design_dark_default_color_error

    View full-size slide

  74. • ThemeOverlay.MaterialComponents.[Light|Dark] を指定する
    android:theme を指定する
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    ...
    android:theme="@style/ThemeOverlay.MaterialComponents.Light">
    ...

    View full-size slide

  75. ThemeOverlay.MaterialComponents
    • color 関係の属性だけ指定されているテーマ
    ThemeOverlay.MaterialComponents
    ThemeOverlay.MaterialComponents.Light
    ThemeOverlay.MaterialComponents.Dark

    View full-size slide

  76. <br/><item name="android:colorBackground">@color/design_default_color_background</item><br/><item name="colorOnBackground">@color/design_default_color_on_background</item><br/><item name="colorSurface">@color/design_default_color_surface</item><br/><item name="colorOnSurface">@color/design_default_color_on_surface</item><br/><item name="colorError">@color/design_default_color_error</item><br/><item name="colorOnError">@color/design_default_color_on_error</item><br/>
    #FFFFFF
    #000000
    #FFFFFF
    #000000
    #B00020
    #FFFFFF
    ThemeOverlay.MaterialComponents.Light
    ThemeOverlay.MaterialComponents.Dark
    #121212
    <br/><item name="android:colorBackground">@color/design_dark_default_color_background</item><br/><item name="colorOnBackground">@color/design_dark_default_color_on_background</item><br/><item name="colorSurface">@color/design_dark_default_color_surface</item><br/><item name="colorOnSurface">@color/design_dark_default_color_on_surface</item><br/><item name="colorError">@color/design_dark_default_color_error</item><br/><item name="colorOnError">@color/design_dark_default_color_on_error</item><br/>
    #FFFFFF
    #000000
    #CF6679
    #121212
    #FFFFFF

    View full-size slide

  77. Light theme
    #03DAC6
    #008577
    colorPrimaryVariant
    colorOnPrimary
    colorSecondary
    colorSecondaryVariant
    colorOnSecondary
    colorPrimarySurface
    colorOnPrimarySurface
    colorSurface
    colorOnSurface
    colorError
    colorOnError
    android:colorBackground
    colorOnBackground
    colorPrimary
    colorControlNormal
    colorAccent
    colorPrimaryDark
    colorPrimary
    android:colorBackground
    colorError
    colorError
    android:colorBackground
    colorAccent
    colorPrimaryDark
    colorPrimary
    colorControlNormal
    #212121
    #000000
    #FF5722
    #FAFAFA
    #B00020
    #FFFFFF
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #000000
    #FFFFFF
    #212121
    #FAFAFA
    #FF5722
    #FFFFFF
    #212121
    #3700B3
    #03DAC6
    #018786
    #FFFFFF
    #FFFFFF
    #000000
    #000000
    #FFFFFF
    #000000
    #FFFFFF
    MDC で使われる Color
    #212121
    #000000
    #212121
    attr 参照
    テーマ継承による引き継ぎ
    AppCompat.Light.DarkActionBar MaterialComponents.Light.DarkActionBar.Bridge MaterialComponents.Light.DarkAc
    ThemeOverlay に指定

    View full-size slide

  78. Bridge を使うときの注意点
    - Tab -

    View full-size slide

  79. Tab
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .TabLayout
    エラー
    MaterialComponents
    エラー
    Widget.MaterialComponents
    .TabLayout
    .Colored

    View full-size slide

  80. Bridge を使うときの注意点
    - Bottom Navigation -

    View full-size slide

  81. BottomNavigationView
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .BottomNavigationView
    エラー
    MaterialComponents
    エラー
    Widget.MaterialComponents
    .BottomNavigationView
    .Colored

    View full-size slide

  82. Bridge を使うときの注意点
    - CardView -

    View full-size slide

  83. • MaterialCardView を使う
    • MDC の style を指定する
    CardView

    View full-size slide

  84. MaterialCardView
    AppCompat
    MaterialComponents
    .Bridge
    style 指定なし Widget.MaterialComponents.CardView
    エラー
    MaterialComponents
    エラー
    #1976D2
    #E3F2FD
    ?attr/borderlessButtonStyle

    View full-size slide

  85. Bridge を使うときの注意点
    - AppBarLayout, Toolbar -

    View full-size slide

  86. • MaterialToolbar を使う
    • AppBarLayout と⼀緒に使う時は MDC の style を指定する
    Toolbar

    View full-size slide

  87. MaterialToolbar
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .Toolbar
    MaterialComponents
    Widget.MaterialComponents
    .Toolbar.Primary

    View full-size slide

  88. AppBarLayout + MaterialToolbar
    MaterialComponents
    .Bridge
    style 指定なし
    or
    Widget.MaterialComponents
    .Toolbar
    Widget.MaterialComponents
    .Toolbar.Surface
    MaterialComponents
    Widget.MaterialComponents
    .Toolbar.Primary

    View full-size slide

  89. Bridge を使うときの注意点
    - BottomAppBar -

    View full-size slide

  90. BottomAppBar
    MaterialComponents
    .Bridge
    style 指定なし
    Widget.MaterialComponents
    .BottomAppBar
    MaterialComponents
    Widget.MaterialComponents
    .BottomAppBar
    .Colored

    View full-size slide

  91. Dark mode
    • night mode : API Level 8 〜
    • Dark mode 向けの設定は [values]-night-v8 に指定
    • 設定 → ディスプレイ → ダークテーマ
    • バッテリセーバーモード

    View full-size slide

  92. parent
    Theme.MaterialComponents
    Theme.MaterialComponents
    .Light.DarkActionBar
    Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    .Bridge
    Theme.MaterialComponents
    .Bridge
    Theme.MaterialComponents
    .Light.DarkActionBar
    .Bridge
    colorPrimary #212121
    colorPrimary #212121
    colorPrimary #BA86FC
    Bridge
    colorPrimary #212121
    Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    non-Bridge
    normal Dark mode
    DayNight

    View full-size slide

  93. Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    normal Dark mode
    Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    .Bridge
    #BA86FC
    non-Bridge
    Bridge
    colorPrimary #212121
    colorPrimary #212121
    colorPrimary #212121 colorPrimary
    DayNight

    View full-size slide

  94. Selected Tab の⾊を変える
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/>
    <br/><item name="colorPrimary">#1976D2</item><br/>

    View full-size slide

  95. Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    normal Dark mode
    Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    .Bridge
    non-Bridge
    Bridge
    DayNight

    View full-size slide

  96. Dark mode の Selected Tab の⾊を変える
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/>

    res/values-night-v8/themes.xml
    <br/><item name="colorPrimary">#1976D2</item><br/>
    res/values/themes.xml

    View full-size slide

  97. Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    normal Dark mode
    Theme.MaterialComponents
    .DayNight
    .DarkActionBar
    .Bridge
    non-Bridge
    Bridge
    DayNight

    View full-size slide

  98. normal Dark mode
    Primary Surface
    .TabLayout.PrimarySurface
    .ActionBar.PrimarySurface
    .AppBarLayout.PrimarySurface
    .BottomAppBar.PrimarySurface
    .BottomNavigationView.PrimarySurface
    .Toolbar.PrimarySurface
    Widget.MaterialComponents
    .Toolbar.Primary .Toolbar.Surface
    .TabLayout
    .BottomNavigationView
    .BottomAppBar
    .AppBarLayout.Surface
    .ActionBar.Surface
    .TabLayout.Colored
    .BottomNavigationView.Colored
    .BottomAppBar.Colored
    .BottomAppBar.Primary
    .ActionBar.Primary

    View full-size slide

  99. normal Dark mode
    non-Bridge
    Bridge
    TabLayout
    .PrimarySurface

    View full-size slide

  100. Android Studio 4.1

    View full-size slide

  101. Android Studio 4.1
    • 新規プロジェクトを作成したときのアプリのベーステーマが
    Theme.MaterialComponents.DayNight.DarkActionBar になった
    • テーマの定義先が styles.xml から themes.xml に変わった
    • ⽣成されるアプリのテーマ名が Theme.[アプリ名] に変わった

    View full-size slide

  102. res/values-night-v8/themes.xml
    res/values/themes.xml
    <br/><!-- Primary brand color. --><br/><item name="colorPrimary">@color/purple_500</item><br/><item name="colorPrimaryVariant">@color/purple_700</item><br/><item name="colorOnPrimary">@color/white</item><br/><!-- Secondary brand color. --><br/><item name="colorSecondary">@color/teal_200</item><br/><item name="colorSecondaryVariant">@color/teal_700</item><br/><item name="colorOnSecondary">@color/black</item><br/><!-- Status bar color. --><br/><item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item><br/><!-- Customize your theme here. --><br/>
    <br/><!-- Primary brand color. --><br/><item name="colorPrimary">@color/purple_200</item><br/><item name="colorPrimaryVariant">@color/purple_700</item><br/><item name="colorOnPrimary">@color/black</item><br/><!-- Secondary brand color. --><br/><item name="colorSecondary">@color/teal_200</item><br/><item name="colorSecondaryVariant">@color/teal_200</item><br/><item name="colorOnSecondary">@color/black</item><br/><!-- Status bar color. --><br/><item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item><br/><!-- Customize your theme here. --><br/>
    #6200EE
    #3700B3
    #FFFFFF
    #03DAC5
    #018786
    #000000
    #3700B3
    #3700B3
    #000000
    #03DAC5
    #03DAC5
    #000000
    #BB86FC
    #3700B3

    View full-size slide

  103. #6200EE
    #6200EE
    #6200EE
    normal Dark mode
    #03DAC5
    #03DAC5
    #BB86FC
    #3700B3
    #03DAC5
    #03DAC5
    #BB86FC
    #BB86FC
    #03DAC5
    #03DAC5
    #3700B3
    #03DAC5
    #03DAC5
    #6200EE #BB86FC

    View full-size slide

  104. まとめ
    • 新しいプロジェクトを作るときは no-Bridge をベースにする
    • 既存のプロジェクトを移⾏するときは Bridge をベースにして徐々に適⽤を広げる
    • Bridge テーマには落とし⽳があるので注意する
    • MaterialButton, MaterialCheckBox, MaterialRadioButton, SwitchMaterial
    を使う
    • ⾊をカスタマイズするときは materialThemeOverlay を指定する
    • Dark Mode 対応がんばろう

    View full-size slide

  105. カスタマイズ
    レシピ集

    View full-size slide

  106. Button の style
    colorPrimary : alpha 100% colorOnPrimary : alpha 100%
    #FFFFFF
    #212121
    Widget.MaterialComponents.Button
    Widget.MaterialComponents.Button.UnelevatedButton
    Widget.MaterialComponents.Button.OutlinedButton
    Widget.MaterialComponents.Button.TextButton
    colorOnSurface : alpha 12%
    #000000

    View full-size slide

  107. Button の⾊を変える
    <br/><item name="colorPrimary">#1976D2</item><br/>
    android:id="@+id/button"
    style="@style/Widget.MyApp.Button"
    ... />
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Button.Blue</item><br/>
    <br/><item name="materialButtonStyle">@style/Widget.MyApp.Button</item><br/>
    or

    View full-size slide

  108. Button.Icon
    app:iconGravity="start" Widget.MaterialComponents
    .Button.Icon
    app:iconGravity="end"
    app:iconGravity="textStart"
    app:iconGravity="textEnd"
    Widget.MaterialComponents
    .Button.OutlinedButton.Icon

    View full-size slide

  109. Icon に Tint しない
    app:iconTint="@null"
    app:iconTint="#ff9573"

    View full-size slide

  110. Button の形を変える
    • shapeAppearance を指定する
    <br/><item name="shapeAppearance">@style/ShapeAppearance.MyApp.Button</item><br/>
    <br/><item name="cornerFamily">cut</item><br/><item name="cornerSize">8dp</item><br/>
    <br/><item name="cornerFamily">rounded</item><br/><item name="cornerSize">20dp</item><br/>

    View full-size slide

  111. FloatingActionButton

    View full-size slide

  112. #000000
    #03DAC6
    FloatingActionButton の style
    colorOnSecondary : alpha 100%
    colorSecondary : alpha 12%
    Widget.MaterialComponents.FloatingActionButton

    View full-size slide

  113. #000000
    #03DAC6
    ExtendedFloatingActionButton の style
    colorOnSecondary : alpha 100%
    colorSecondary : alpha 12%
    Widget.MaterialComponents.ExtendedFloatingActionButton
    Widget.MaterialComponents.ExtendedFloatingActionButton.Icon

    View full-size slide

  114. parent="Widget.MaterialComponents.FloatingActionButton">
    @style/ThemeOverlay.MyApp.FloatingActionButton

    FloatingActionButton の⾊を変える
    ...
    style="@style/Widget.MyApp.FloatingActionButton"
    ... />
    <br/><item name="colorSecondary">#1976D2</item><br/><item name="colorOnSecondary">#FFFFFF</item><br/>

    View full-size slide

  115. CheckBox の style
    layer(colorSurface, colorOnSurface) : alpha 54%
    android:textColorPrimary
    #de000000
    layer(colorSurface, colorControlActivated) : alpha 100%
    layer(colorSurface, colorOnSurface) : alpha 38%
    #39000000
    enabled
    disabled
    #000000
    #03DAC6
    #000000
    (alpha 22%)
    (alpha 87%)

    View full-size slide

  116. CheckBox の⾊を変える(1)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>

    View full-size slide

  117. CheckBox の⾊を変える(1)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    全部⻘にしたい

    View full-size slide

  118. CheckBox の⾊を変える(2)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>

    View full-size slide

  119. CheckBox の⾊を変える(2)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>
    もっと薄くしたい
    薄くしたくない

    View full-size slide

  120. CheckBox の⾊を変える(3)







    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/check_box_tint"
    android:text="@string/check_box" />
    res/color/check_box_tint.xml

    View full-size slide

  121. CheckBox の⾊を変える(3)







    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/check_box_tint"
    android:text="@string/check_box" />
    res/color/check_box_tint.xml
    ripple も⻘にしたい

    View full-size slide

  122. CheckBox の⾊を変える(4)
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/><item name="colorControlHighlight">#1a1976D2</item><br/>
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item><br/>

    View full-size slide

  123. CheckBox の⾊を変える(5)
    android:color="@color/check_box_ripple_color"
    android:radius="20dp" />
    android:id="@+id/checkbox"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/check_box_background"
    android:buttonTint="@color/check_box_tint"
    android:text="@string/check_box" />
    res/drawable/check_box_background.xml



    res/color/check_box_ripple_color.xml

    View full-size slide

  124. 独⾃画像の CheckBox にする
    • app:useMaterialThemeColors="false" を指定する
    • → MDC Color によって Tint されない
    android:id="@+id/checkbox1"
    style="@style/Widget.MyApp.CompoundButton.CheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/check_box_custom"
    android:text="@string/check_box"
    app:useMaterialThemeColors="false" />

    View full-size slide

  125. RadioButton の style
    layer(colorSurface, colorOnSurface) : alpha 54%
    android:textColorPrimary
    #de000000
    layer(colorSurface, colorControlActivated) : alpha 100%
    layer(colorSurface, colorOnSurface) : alpha 38%
    #39000000
    enabled
    disabled
    #000000
    #03DAC6
    #000000
    (alpha 22%)
    (alpha 87%)

    View full-size slide

  126. Switch の style
    android:textColorPrimary
    #de000000
    layer(colorSurface, colorControlActivated) : alpha 100%
    #39000000
    enabled
    disabled (alpha 22%)
    (alpha 87%)
    layer(colorSurface, colorControlActivated) : alpha 38%
    #03DAC6
    layer(colorSurface, colorControlActivated) : alpha 12%
    layer(colorSurface, colorOnSurface) : alpha 12%
    layer(colorSurface, colorOnSurface) : alpha 32%
    colorSurface
    thumb
    colorSurface
    #03DAC6
    track
    #FFFFFF
    layer(colorSurface, colorControlActivated) : alpha 54%
    #000000
    #03DAC6
    #000000
    #03DAC6
    #FFFFFF

    View full-size slide

  127. Switch の⾊を変える(1)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item><br/>

    View full-size slide

  128. Switch の⾊を変える(1)
    <br/>...<br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item><br/>
    <br/><item name="colorAccent">?attr/colorSecondary</item><br/><item name="colorSecondary">#1976D2</item><br/>
    Bridge
    non-Bridge
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item><br/>
    track をもう少し薄くしたい

    View full-size slide

  129. Switch の⾊を変える(2)







    style="@style/Widget.MyApp.CompoundButton.Switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/switch1"
    app:trackTint="@color/switch_track_tint" />
    res/color/switch_track_tint.xml

    View full-size slide

  130. #FFFFFF
    Slider の style
    colorPrimary : alpha 100%
    #212121
    colorPrimary : alpha 24%
    #212121
    colorPrimary : alpha 54%
    #212121
    colorOnPrimary : alpha 100%
    #FFFFFF
    colorOnPrimary : alpha 54%
    layer(
    android:colorBackground : alpha 90%,
    colorOnBackground : alpha 60%
    ) #000000

    View full-size slide

  131. <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Slider</item><br/>
    Slider の⾊を変える
    ...
    style="@style/Widget.MyApp.Slider"
    ... />
    <br/><item name="colorPrimary">#1976D2</item><br/><item name="colorOnBackground">#1976D2</item><br/>

    View full-size slide

  132. TextInputLayout

    View full-size slide

  133. TextInputLayout.FilledBox の style
    colorPrimary : alpha 100%
    colorOnSurface : alpha 42%
    colorError : alpha 100%
    colorOnSurface : alpha 12%
    colorOnSurface : alpha 54%
    colorOnSurface : alpha 60%
    #000000
    #212121
    android:textColorPrimary
    #de000000
    #39000000
    enabled
    disabled (alpha 22%)
    (alpha 87%)
    #B00020
    #000000
    colorOnSurface : alpha 54%
    colorError : alpha 100%
    colorOnSurface : alpha 60%
    colorOnSurface : alpha 60%
    #000000
    #000000
    #B00020
    colorOnSurface : alpha 60%
    #000000
    #000000
    #000000
    #000000
    colorError : alpha 100%
    #B00020
    colorPrimary : alpha 100%
    #212121
    colorError : alpha 100%
    #B00020

    View full-size slide

  134. TextInputLayout.OutlinedBox の style
    colorPrimary : alpha 100%
    colorOnSurface : alpha 38%
    colorError : alpha 100%
    colorOnSurface : alpha 60%
    colorOnSurface : alpha 60%
    #000000
    #212121
    android:textColorPrimary
    #de000000
    #39000000
    enabled
    disabled (alpha 22%)
    (alpha 87%)
    #B00020
    colorOnSurface : alpha 60%
    colorError : alpha 100%
    colorOnSurface : alpha 60%
    colorOnSurface : alpha 60%
    #000000
    #000000
    #B00020
    colorOnSurface : alpha 60%
    #000000
    #000000
    #000000
    #000000
    colorError : alpha 100%
    #B00020
    colorPrimary : alpha 100%
    #212121
    colorError : alpha 100%
    #B00020

    View full-size slide

  135. TextInputLayout の⾊を変える(1)
    parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    ...
    @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox

    parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    #1976D2

    View full-size slide

  136. TextInputLayout の⾊を変える(1)
    parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    ...
    @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox

    parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    #1976D2

    Box をもう少し薄くしたい

    View full-size slide

  137. TextInputLayout の⾊を変える(2)
    parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox
    @color/text_input_layout_box_background








    res/color/text_input_layout_box_background.xml

    View full-size slide

  138. #FFFFFF
    #FFFFFF
    Tab の style
    colorPrimary : alpha 100%
    colorOnSurface : alpha 60%
    colorSurface : alpha 100%
    #212121
    #000000
    #212121
    #FFFFFF
    #FFFFFF
    colorPrimary : alpha 100%
    #212121
    colorOnPrimary : alpha 100%
    colorOnPrimary : alpha 60%
    colorPrimary : alpha 100%
    colorOnPrimary : alpha 100%
    Widget.MaterialComponents.TabLayout.Colored
    Widget.MaterialComponents.TabLayout

    View full-size slide

  139. Tab の⾊を変える(1)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/>
    <br/><item name="colorPrimary">#1976D2</item><br/>
    style="@style/Widget.MyApp.TabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    View full-size slide

  140. Tab の⾊を変える(1)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/>
    <br/><item name="colorPrimary">#1976D2</item><br/>
    薄い⻘にしたい
    style="@style/Widget.MyApp.TabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    View full-size slide

  141. Tab の⾊を変える(2)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/><item name="tabTextColor">@color/tab_text</item><br/>
    res/color/tab_text.xml




    View full-size slide

  142. Tab の⾊を変える(2)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/><item name="tabTextColor">@color/tab_text</item><br/>
    res/color/tab_text.xml
    unselected の ripple も⻘にしたい




    View full-size slide








  143. Tab の⾊を変える(3)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item><br/><item name="tabTextColor">@color/tab_text</item><br/><item name="tabRippleColor">@color/tab_ripple</item><br/>
    res/color/tab_ripple.xml

    View full-size slide

  144. Bottom Navigation

    View full-size slide

  145. #FFFFFF
    BottomNavigationView の style
    colorPrimary : alpha 100%
    colorOnSurface : alpha 60%
    colorSurface : alpha 100%
    #212121
    #000000
    #212121
    #FFFFFF
    #FFFFFF
    colorOnPrimary : alpha 100%
    colorOnPrimary : alpha 60%
    colorPrimary : alpha 100%
    Widget.MaterialComponents.BottomNavigationView.Colored
    Widget.MaterialComponents.BottomNavigationView

    View full-size slide

  146. style="@style/Widget.MyApp.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    BottomNavigationView の⾊を変える(1)
    parent="Widget.MaterialComponents.BottomNavigationView">
    @style/ThemeOverlay.MyApp.BottomNavigationView

    <br/><item name="colorPrimary">#1976D2</item><br/>

    View full-size slide

  147. style="@style/Widget.MyApp.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    BottomNavigationView の⾊を変える(1)
    parent="Widget.MaterialComponents.BottomNavigationView">
    @style/ThemeOverlay.MyApp.BottomNavigationView

    <br/><item name="colorPrimary">#1976D2</item><br/>
    薄い⻘にしたい

    View full-size slide

  148. style="@style/Widget.MyApp.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    BottomNavigationView の⾊を変える(2)
    parent="Widget.MaterialComponents.BottomNavigationView">
    @style/ThemeOverlay.MyApp.BottomNavigationView

    <br/><item name="colorPrimary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/>

    View full-size slide

  149. style="@style/Widget.MyApp.BottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    BottomNavigationView の⾊を変える(2)
    parent="Widget.MaterialComponents.BottomNavigationView">
    @style/ThemeOverlay.MyApp.BottomNavigationView

    <br/><item name="colorPrimary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/>
    もっと薄くしたい

    View full-size slide

  150. parent="Widget.MaterialComponents.BottomNavigationView">
    @style/ThemeOverlay.MyApp.BottomNavigationView
    @color/bottom_nav_item
    @color/bottom_nav_item

    <br/><item name="colorPrimary">#1976D2</item><br/><item name="colorOnSurface">#1976D2</item><br/>
    BottomNavigationView の⾊を変える(3)




    res/color/bottom_nav_item.xml

    View full-size slide

  151. #FFFFFF
    MaterialCardView の style
    colorSurface : alpha 100%
    #212121
    #FFFFFF
    colorPrimary : alpha 100%
    colorPrimary : alpha 8%
    Widget.MaterialComponents.CardView isChecked = true

    View full-size slide

  152. style="@style/Widget.MyApp.CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    MaterialCardView の⾊を変える(1)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CardView</item><br/>
    <br/><item name="colorPrimary">#1976D2</item><br/><item name="borderlessButtonStyle">@style/Widget.MaterialComponents.Button.TextButton</item><br/>

    View full-size slide

  153. AppBarLayout, Toolbar

    View full-size slide

  154. #FFFFFF
    #FFFFFF
    #FFFFFF
    #212121
    Toolbar の style
    colorControlNormal
    → colorOnSurface : alpha 60%
    null (background)
    Widget.MaterialComponents.Toolbar
    android:textColorPrimary
    #de000000
    #39000000
    enabled
    disabled (alpha 22%)
    (alpha 87%)
    colorControlNormal
    → android:textColorSecondary
    #8a000000
    #24000000
    enabled
    disabled (alpha 14%)
    (alpha 54%)
    Widget.MaterialComponents.Toolbar
    .Primary
    Widget.MaterialComponents.Toolbar
    .Surface
    colorSurface : alpha 100%
    #FFFFFF
    colorPrimary : alpha 100%
    colorOnSurface : alpha 87%
    #000000
    colorOnSurface : alpha 60%
    #000000
    #000000
    colorOnPrimary : alpha 100%
    colorOnPrimary : alpha 60%
    colorControlNormal
    → colorOnPrimary : alpha 100%

    View full-size slide

  155. #212121
    AppBarLayout の style
    Widget.MaterialComponents.AppBarLayout.Surface Widget.MaterialComponents.AppBarLayout.Primary
    colorSurface : alpha 100%
    #FFFFFF
    colorPrimary : alpha 100%
    android:textColorPrimary
    #de000000
    #39000000
    enabled
    disabled (alpha 22%)
    (alpha 87%)

    View full-size slide

  156. AppBarLayout 内の⾊を変える(1)
    style="@style/Widget.MaterialComponents.AppBarLayout.Primary"
    android:layout_width="match_parent"
    android:layout_height="128dp">
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:expandedTitleTextAppearance="@style/TextAppearance.MyApp.CollapsingToolbar.Expanded">
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.MaterialComponents.Toolbar.Primary" />


    View full-size slide

  157. BottomAppBar

    View full-size slide

  158. #FFFFFF
    #212121
    BottomAppBar の style
    Widget.MaterialComponents.BottomAppBar
    colorControlNormal
    → android:textColorSecondary
    #8a000000
    #24000000
    enabled
    disabled (alpha 14%)
    (alpha 54%)
    Widget.MaterialComponents.BottomAppBar.Colored
    colorSurface : alpha 100%
    #FFFFFF
    colorPrimary : alpha 100%
    colorControlNormal
    → colorOnPrimary : alpha 100%

    View full-size slide

  159. style="@style/Widget.MyApp.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    BottomAppBar の⾊を変える(1)
    <br/><item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomAppBar</item><br/>
    <br/><item name="colorControlNormal">#1976D2</item><br/>

    View full-size slide

  160. MaterialComponents
    .Bridge
    MaterialComponents
    Widget.MaterialComponents
    MaterialComponents
    .Light.Bridge
    MaterialComponents
    .Light
    MaterialComponents
    .Light.DarkActionBar
    .Bridge
    MaterialComponents
    .Light.DarkActionBar
    .Light.ActionBar.Solid
    .ActionBar.Surface .ActionBar.Solid
    .ActionBar.Primary
    actionBarStyle value
    primaryColor #212121
    primarySurface #121212
    primaryColor #BA86FC
    primarySurface #121212
    primaryColor #f5f5f5
    primarySurface #FFFFFF
    primaryColor #6200EE
    primarySurface #FFFFFF
    primaryColor
    primarySurface #FFFFFF
    #212121
    primaryColor
    primarySurface #FFFFFF
    #212121
    ThemeOverlay
    .MaterialComponents
    .Dark.ActionBar
    ThemeOverlay
    .MaterialComponents
    .ActionBar.Surface
    actionBarTheme
    colorControlNormal
    → android:textColorPrimary
    android:textColorPrimary
    → colorOnSurface : alpha 87%
    colorControlNormal
    → colorOnSurface : alpha 60%
    ThemeOverlay
    .AppCompat
    .Dark.ActionBar
    colorControlNormal
    → android:textColorPrimary
    ThemeOverlay
    .AppCompat
    .ActionBar
    colorControlNormal
    → android:textColorPrimary
    ThemeOverlay
    .AppCompat
    .ActionBar
    colorControlNormal
    → android:textColorPrimary
    ThemeOverlay
    .AppCompat
    .ActionBar
    colorControlNormal
    → android:textColorPrimary

    View full-size slide

  161. Widget.MaterialComponents.ActionBar.Surface
    android:textColorPrimary
    Widget.MaterialComponents.ActionBar.Primary
    colorSurface : alpha 100%
    colorControlNormal
    android:textColorPrimary
    colorPrimary : alpha 100%
    colorControlNormal
    Widget.MaterialComponents.ActionBar.Solid Widget.MaterialComponents.Light.ActionBar.Solid
    android:textColorPrimary
    colorPrimary : alpha 100%
    colorControlNormal
    android:textColorPrimary
    colorPrimary : alpha 100%
    colorControlNormal

    View full-size slide

  162. Widget.MaterialComponents.ActionBar.Surface
    Widget.AppCompat.Light.ActionBar.Solid
    background
    → colorSurface : alpha 100%
    parent
    Widget.MaterialComponents.ActionBar.Primary
    Widget.AppCompat.ActionBar.Solid
    background
    → colorPrimary : alpha 100%
    Widget.MaterialComponents.ActionBar.Solid
    Widget.MaterialComponents.Light.ActionBar.Solid
    background
    → colorPrimary : alpha 100%
    background
    → colorPrimary : alpha 100%

    View full-size slide