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

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

D2bcabeeb1ddff142fb8988b412cb4d3?s=47 Yuki Anzai
October 17, 2020
Technology
7
3.2k

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

D2bcabeeb1ddff142fb8988b412cb4d3?s=128

Yuki Anzai

October 17, 2020
Tweet

More Decks by Yuki Anzai

See All by Yuki Anzai
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
1
400
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
4
2.8k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
2.7k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
8
3.1k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
3
240
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
7
1.3k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
8
570
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
20
4k
D2bcabeeb1ddff142fb8988b412cb4d3?s=48 yanzm
10
1.6k

Other Decks in Technology

See All in Technology
439d941a6e41920af9bf4d5bd5f97e3a?s=48 nghialv
0
140
Db970064044641bf2b495822d66f0685?s=48 higebu
1
230
C47bda32c8455a59471cd7e19c32c074?s=48 hamadakoji
10
3.3k
6eb87371ba9a9bb7767af80a5c9f5306?s=48 yhana
0
9.6k
B87a5fff1932cdac75745f24a92ba739?s=48 ryusukekimura
0
200
3318abf64ba11ee70d4f5dee62051801?s=48 tagucch
0
140
9955f1755a5ae81bc294db7291e56af2?s=48 cmnakahara
0
330
B1cc148711c6a37a5c922b6e72a4ad52?s=48 upura
4
2k
2bc6f91177ebb2c2681fe44f8522c681?s=48 amotz
0
2.1k
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
400
C74499162d9791bcc12c66a8a8ddc26f?s=48 otl
0
540
A19876f5694283f26a061746ba82c3b0?s=48 germsvel
1
100

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.8k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
111
15k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
18
2.1k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
11k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.2k
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
4
180
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5.1k

Transcript

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

  2. Material Design Components • Material Design が提唱している⾊や形、タイポグラフィ、アニメーション を使ったコンポーネントが実装されているライブラリ • https://material.io/

    • MDCに実装されているコンポーネントを使うには MDC のテーマを使う必要 がある implementation "com.google.android.material:material:1.2.1"

  3. MDC のテーマを使う

  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 を明⽰的に 適⽤する必要がある

  5. MDC のテーマ • 新規プロジェクト • non-Bridge の MDC テーマをベーステーマにする •

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

  6. Bridge をベーステーマにする <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... </style> <style name="Theme.MyApp.Light.DarkActionBar" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">

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

  7. Bridge での設定 • MDC の style を設定しない → AppCompat と同じ

    <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint_name"> ... </com.google.android.material.textfield.TextInputLayout>

  8. Bridge での設定 • MDC の style を設定しない → AppCompat と同じ

    • MDC の style を設定 → MaterialComponents と同じ <com.google.android.material.textfield.TextInputLayout 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"> ... </com.google.android.material.textfield.TextInputLayout>

  9. <style name="Theme.MyApp.Light.DarkActionBar" parent="..."> <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item> </style> Bridge での設定 • MDC

    の style を設定しない → AppCompat と同じ • MDC の style を設定 → MaterialComponents と同じ

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

    MaterialComponents エラー Widget.MaterialComponents .TextInputLayout .OutlinedBox

  11. MDC の Color 属性

  12. colorAccent colorPrimaryDark colorPrimary AppCompat colorError android:colorBackground colorControlNormal

  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

  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 テーマ継承による引き継ぎ

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

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

    colorSurface

  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

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

    BadgeDrawable の⾊

  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

  31. • window の背景に使われる • Theme.Material, Theme.Material.Light で android:windowBackground に指定されている android:colorBackground

    <item name="windowBackground">?attr/colorBackground</item> android:colorBackground #FFFFFF Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.Light.DarkActionBar.Bridge android:colorBackground #FAFAFA

  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

  33. • AppCompat からある属性 • App bar の Navigation icon, Overflow

    icon の Tint として使われる • MDC の ActionBar, BottomAppBar, Toolbar ⽤の style では上書き指定されている • App bar の Menu icon に指定する vector drawable は tint に colorControlNormal を指定する colorControlNormal <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:tint="?attr/colorControlNormal" android:viewportWidth="24" android:viewportHeight="24"> <path ... /> </vector>

  34. MDC の Color 属性の利⽤

  35. MDC ⽤ Color 属性の利⽤ colorPrimary : alpha 100% colorOnSurface :

    alpha 42% colorError : alpha 100% TextInputLayout.FilledBox MaterialComponents.Light.DarkActionBar.Bridge colorOnSurface : alpha 12%

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

  37. <style name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="Base.Widget.MaterialComponents.TextInputLayout"> ... <item name="boxBackgroundColor">@color/mtrl_filled_background_color</item> ... </style> <selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="0.16" android:color="?attr/colorOnSurface" android:state_hovered="true"/> <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_focused="true"/> <item android:alpha="0.04" android:color="?attr/colorOnSurface" android:state_enabled="false"/> <item android:alpha="0.12" android:color="?attr/colorOnSurface"/> </selector> mtrl_filled_background_color.xml

  38. MDC の Color カスタマイズ

  39. MDC の Color カスタマイズ • テーマの Color 属性値を変更する • 全

    Component に影響する • materialThemeOverlay を指定する • Component ⽤の独⾃ style で指定する • 独⾃ style を指定した Component にだけ影響する <com.google.android.material.textfield.TextInputLayout ... app:colorPrimary="#1976D2"> <style name="Theme.MyApp.Light.DarkActionBar" ...> <item name="colorPrimary">#1976D2</item> </style>

  40. materialThemeOverlay を指定する（１） • 独⾃ style のベースにしたい Component の style を調べる

  41. materialThemeOverlay を指定する（２） • ベースにする style を継承した style を⽤意する <style name="Widget.MyApp.TextInputLayout.FilledBox"

    parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> </style>

  42. materialThemeOverlay を指定する（３） • ベースにする style で materialThemeOverlay が指定されているか調べ る <style

    name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="..."> <item name="materialThemeOverlay"> @style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox </item> ... </style>

  43. materialThemeOverlay を指定する（４） • ベースにする style で materialThemeOverlay に指定されている ThemeOverlay を継承したテーマを⽤意し、Color

    属性を上書きする <style name="ThemeOverlay.MyApp.TextInputEditText.FilledBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox"> <item name="colorPrimary">#1976D2</item> </style> materialThemeOverlay が指定されていないときは parent=""

  44. materialThemeOverlay を指定する（４） • ベースにする style で materialThemeOverlay に指定されている ThemeOverlay を継承したテーマを⽤意し、Color

    属性を上書きする <style name="ThemeOverlay.MyApp.TextInputEditText.FilledBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox"> <item name="colorPrimary">#1976D2</item> </style> materialThemeOverlay が指定されていないときは parent=""

  45. materialThemeOverlay を指定する（５） • Component ⽤の独⾃ style で、materialThemeOverlay に⽤意した ThemeOverlay を指定する

    <style name="Widget.MyApp.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="materialThemeOverlay"> @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox </item> </style>

  46. materialThemeOverlay を指定する（６-１） • Component ⽤の独⾃ style を Component に指定する <com.google.android.material.textfield.TextInputLayout

    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">

  47. materialThemeOverlay を指定する（６-２） • Component ⽤の独⾃ style を Component のデフォルト style

    テーマ属 性に指定する <style name="Theme.MyApp.Light.DarkActionBar" parent="..."> <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout.FilledBox</item> </style>

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

  49. • Bridge と non-Bridge で異なる • 実際に⽣成される <Button> のインスタンス •

    AppCompat : AppCompatButton • MaterialComponents.Bridge : AppCompatButton • MaterialComponents : MaterialButton • Bridge だと MDC の Button style を指定しても意図した通りにならない Button

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

    エラー Widget.MaterialComponents .Button .OutlinedButton

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

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

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

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

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

  56. • Bridge と non-Bridge で異なる • 実際に⽣成される <CheckBox> のインスタンス •

    AppCompat : AppCompatCheckBox • MaterialComponents.Bridge : AppCompatCheckBox • MaterialComponents : MaterialCheckBox • Bridge で MDC の CheckBox style を指定すると落ちる CheckBox

  57. Bridge で MDC の style を適⽤する <com.google.android.material.checkbox.MaterialCheckBox 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! <com.google.android.material.checkbox.MaterialCheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/check_box" app:useMaterialThemeColors="true" />

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

    MaterialCheckBox OK ?

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

    MaterialCheckBox OK colorControlActivated

  60. #03DAC6 #008577 colorSecondary colorControlActivated colorAccent AppCompat MaterialComponents.Bridge MaterialComponents attr 参照

    colorControlActivated colorAccent テーマ継承による引き継ぎ Light.DarkActionBar #03DAC6 #008577 #03DAC6 colorControlActivated colorAccent #008577 #008577

  61. Bridge で MDC と同じ⾒た⽬にする <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> <item name="useMaterialThemeColors">true</item> <item

    name="android:minWidth">@dimen/mtrl_min_touch_target_size</item> <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> </style> <com.google.android.material.checkbox.MaterialCheckBox 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" />

  62. Bridge で MDC と同じ⾒た⽬にする <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> <item name="useMaterialThemeColors">true</item> <item

    name="android:minWidth">@dimen/mtrl_min_touch_target_size</item> <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> </style> <com.google.android.material.checkbox.MaterialCheckBox 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" />

  63. Bridge で MDC と同じ⾒た⽬にする <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> <item name="useMaterialThemeColors">true</item> <item

    name="android:minWidth">@dimen/mtrl_min_touch_target_size</item> <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> </style> <com.google.android.material.checkbox.MaterialCheckBox 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

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

  65. • Bridge と non-Bridge で異なる • 実際に⽣成される <RadioButton> のインスタンス •

    AppCompat : AppCompatRadioButton • MaterialComponents.Bridge : AppCompatRadioButton • MaterialComponents : MaterialRadioButton • Bridge で MDC の RadioButton style を指定すると落ちる RadioButton

  66. Bridge で MDC と同じ⾒た⽬にする <style name="Widget.MyApp.CompoundButton.RadioButton" parent="Widget.AppCompat.CompoundButton.RadioButton"> <item name="useMaterialThemeColors">true</item> <item

    name="android:minWidth">@dimen/mtrl_min_touch_target_size</item> <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.RadioButton</item> </style> <style name="ThemeOverlay.MyApp.CompoundButton.RadioButton" parent=""> <item name="colorAccent">?attr/colorSecondary</item> </style> <com.google.android.material.radiobutton.MaterialRadioButton 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" />

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

  68. • SwitchMaterial を使う • Bridge で MDC の Switch style

    を指定すると落ちる Switch （MaterialSwitch じゃないよ！）

  69. Bridge で MDC と同じ⾒た⽬にする <style name="Widget.MyApp.CompoundButton.Switch" parent="Widget.AppCompat.CompoundButton.Switch"> <item name="useMaterialThemeColors">true</item> <item

    name="android:minWidth">@dimen/mtrl_min_touch_target_size</item> <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> </style> <style name="ThemeOverlay.MyApp.CompoundButton.Switch" parent=""> <item name="colorAccent">?attr/colorSecondary</item> </style> <com.google.android.material.switchmaterial.SwitchMaterial android:id="@+id/switch" style="@style/Widget.MyApp.CompoundButton.Switcdh" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/switch" />

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

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

    MaterialComponents エラー Widget.MaterialComponents .TextInputLayout .OutlinedBox

  72. Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.Light.DarkActionBar.Bridge • Bridge と non-Bridge で error の⾊が異なる •

    Bridge で error の⾊を non-Bridge と同じにするには • colorError を指定する or android:theme を指定する TextInputLayout

  73. <style name="Theme.MyApp.Light.DarkActionBar" parent="...Bridge"> <item name="colorError">#B00020</item> </style> colorErrorを指定する <style name="Theme.MyApp.Light.DarkActionBar" parent="...Bridge">

    <item name="colorError">@color/design_default_color_error</item> </style> or #CF6679 #B00020 Light テーマ : @color/design_default_color_error Dark テーマ : @color/design_dark_default_color_error

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

    ... </com.google.android.material.textfield.TextInputLayout>

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

  76. <style name="ThemeOverlay.MaterialComponents.Light" parent="ThemeOverlay.AppCompat.Light"> <item name="android:colorBackground">@color/design_default_color_background</item> <item name="colorOnBackground">@color/design_default_color_on_background</item> <item name="colorSurface">@color/design_default_color_surface</item> <item

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

  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 に指定

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

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

    エラー Widget.MaterialComponents .TabLayout .Colored

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

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

    エラー Widget.MaterialComponents .BottomNavigationView .Colored

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

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

  84. MaterialCardView AppCompat MaterialComponents .Bridge style 指定なし Widget.MaterialComponents.CardView エラー MaterialComponents エラー

    <item name="colorPrimary">#1976D2</item> <item name="colorSurface">#E3F2FD</item> ?attr/borderlessButtonStyle

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

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

    Toolbar

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

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

    Widget.MaterialComponents .Toolbar.Surface MaterialComponents Widget.MaterialComponents .Toolbar.Primary

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

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

    .Colored

  91. Dark mode

  92. Dark mode • night mode : API Level 8 〜

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

  93. 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

  94. Theme.MaterialComponents .DayNight .DarkActionBar normal Dark mode Theme.MaterialComponents .DayNight .DarkActionBar .Bridge

    #BA86FC non-Bridge Bridge colorPrimary #212121 colorPrimary #212121 colorPrimary #212121 colorPrimary DayNight

  95. Selected Tab の⾊を変える <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> </style> <style

    name="ThemeOverlay.MyApp.TabLayout" parent=""> <item name="colorPrimary">#1976D2</item> </style>

  96. Theme.MaterialComponents .DayNight .DarkActionBar normal Dark mode Theme.MaterialComponents .DayNight .DarkActionBar .Bridge

    non-Bridge Bridge DayNight

  97. Dark mode の Selected Tab の⾊を変える <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> </style> <style name="ThemeOverlay.MyApp.TabLayout" parent="" /> res/values-night-v8/themes.xml <style name="ThemeOverlay.MyApp.TabLayout" parent=""> <item name="colorPrimary">#1976D2</item> </style> res/values/themes.xml

  98. Theme.MaterialComponents .DayNight .DarkActionBar normal Dark mode Theme.MaterialComponents .DayNight .DarkActionBar .Bridge

    non-Bridge Bridge DayNight

  99. 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

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

  101. Android Studio 4.1

  102. Android Studio 4.1 • 新規プロジェクトを作成したときのアプリのベーステーマが Theme.MaterialComponents.DayNight.DarkActionBar になった • テーマの定義先が styles.xml

    から themes.xml に変わった • ⽣成されるアプリのテーマ名が Theme.[アプリ名] に変わった

  103. res/values-night-v8/themes.xml res/values/themes.xml <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. -->

    <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_200</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/black</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_200</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> #6200EE #3700B3 #FFFFFF #03DAC5 #018786 #000000 #3700B3 #3700B3 #000000 #03DAC5 #03DAC5 #000000 #BB86FC #3700B3

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

    #03DAC5 #03DAC5 #BB86FC #BB86FC #03DAC5 #03DAC5 #3700B3 #03DAC5 #03DAC5 #6200EE #BB86FC

  105. まとめ • 新しいプロジェクトを作るときは no-Bridge をベースにする • 既存のプロジェクトを移⾏するときは Bridge をベースにして徐々に適⽤を広げる •

    Bridge テーマには落とし⽳があるので注意する • MaterialButton, MaterialCheckBox, MaterialRadioButton, SwitchMaterial を使う • ⾊をカスタマイズするときは materialThemeOverlay を指定する • Dark Mode 対応がんばろう

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

  107. Button

  108. 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

  109. Button の⾊を変える <style name="ThemeOverlay.MyApp.Button.Blue" parent=""> <item name="colorPrimary">#1976D2</item> </style> <com.google.android.material.button.MaterialButton android:id="@+id/button"

    style="@style/Widget.MyApp.Button" ... /> <style name="Widget.MyApp.Button" parent="Widget.MaterialComponents.Button"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Button.Blue</item> </style> <style name="Theme.MyApp.Light.DarkActionBar" parent="..."> <item name="materialButtonStyle">@style/Widget.MyApp.Button</item> </style> or

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

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

  112. Button の形を変える • shapeAppearance を指定する <style name="Widget.MyApp.Button" parent="Widget.MaterialComponents.Button"> <item name="shapeAppearance">@style/ShapeAppearance.MyApp.Button</item>

    </style> <style name="ShapeAppearance.MyApp.Button" parent=""> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> </style> <style name="ShapeAppearance.MyApp.Button" parent=""> <item name="cornerFamily">rounded</item> <item name="cornerSize">20dp</item> </style>

  113. FloatingActionButton

  114. #000000 #03DAC6 FloatingActionButton の style colorOnSecondary : alpha 100% colorSecondary

    : alpha 12% Widget.MaterialComponents.FloatingActionButton

  115. #000000 #03DAC6 ExtendedFloatingActionButton の style colorOnSecondary : alpha 100% colorSecondary

    : alpha 12% Widget.MaterialComponents.ExtendedFloatingActionButton Widget.MaterialComponents.ExtendedFloatingActionButton.Icon

  116. <style name="Widget.MyApp.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.FloatingActionButton</item> </style> FloatingActionButton の⾊を変える <com.google.android.material.floatingactionbutton.FloatingActionButton ...

    style="@style/Widget.MyApp.FloatingActionButton" ... /> <style name="ThemeOverlay.MyApp.FloatingActionButton" parent=""> <item name="colorSecondary">#1976D2</item> <item name="colorOnSecondary">#FFFFFF</item> </style>

  117. CheckBox

  118. 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%)

  119. CheckBox の⾊を変える（１） <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style>

  120. CheckBox の⾊を変える（１） <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> 全部⻘にしたい

  121. CheckBox の⾊を変える（２） <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style>

  122. CheckBox の⾊を変える（２） <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style> もっと薄くしたい 薄くしたくない

  123. CheckBox の⾊を変える（３） <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.20" android:color="#1976D2"

    android:state_checked="true" android:state_enabled="false" /> <item android:alpha="0.20" android:color="#1976D2" android:state_enabled="false" /> <item android:alpha="1.00" android:color="#1976D2" android:state_checked="true" /> <item android:alpha="1.00" android:color="#1976D2" /> </selector> <com.google.android.material.checkbox.MaterialCheckBox 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

  124. CheckBox の⾊を変える（３） <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.20" android:color="#1976D2"

    android:state_checked="true" android:state_enabled="false" /> <item android:alpha="0.20" android:color="#1976D2" android:state_enabled="false" /> <item android:alpha="1.00" android:color="#1976D2" android:state_checked="true" /> <item android:alpha="1.00" android:color="#1976D2" /> </selector> <com.google.android.material.checkbox.MaterialCheckBox 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 も⻘にしたい

  125. CheckBox の⾊を変える（４） <style name="ThemeOverlay.MyApp.CompoundButton.CheckBox" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> <item

    name="colorOnSurface">#1976D2</item> <item name="colorControlHighlight">#1a1976D2</item> </style> <style name="Widget.MyApp.CompoundButton.CheckBox" parent="..."> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> </style>

  126. CheckBox の⾊を変える（５） <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/check_box_ripple_color" android:radius="20dp" /> <com.google.android.material.checkbox.MaterialCheckBox 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 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.10" android:color="#1976D2" /> </selector> res/color/check_box_ripple_color.xml

  127. 独⾃画像の CheckBox にする • app:useMaterialThemeColors="false" を指定する • → MDC Color

    によって Tint されない <com.google.android.material.checkbox.MaterialCheckBox 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" />

  128. RadioButton

  129. 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%)

  130. Switch

  131. 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

  132. Switch の⾊を変える（１） <style name="Widget.MyApp.CompoundButton.Switch" parent="Widget.AppCompat.CompoundButton.Switch"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.Switch" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.Switch" parent="Widget.MaterialComponents.CompoundButton.Switch"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> </style>

  133. Switch の⾊を変える（１） <style name="Widget.MyApp.CompoundButton.Switch" parent="Widget.AppCompat.CompoundButton.Switch"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> </style> <style

    name="ThemeOverlay.MyApp.CompoundButton.Switch" parent=""> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> </style> Bridge non-Bridge <style name="Widget.MyApp.CompoundButton.Switch" parent="Widget.MaterialComponents.CompoundButton.Switch"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> </style> track をもう少し薄くしたい

  134. Switch の⾊を変える（２） <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.12" android:color="?attr/colorControlActivated"

    android:state_checked="true" android:state_enabled="false" /> <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false" /> <item android:alpha="0.54" android:color="?attr/colorControlActivated" android:state_checked="true" /> <item android:alpha="0.20" android:color="?attr/colorOnSurface" /> </selector> <com.google.android.material.switchmaterial.SwitchMaterial 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

  135. Slider

  136. #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

  137. <style name="Widget.MyApp.Slider" parent="Widget.MaterialComponents.Slider"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Slider</item> </style> Slider の⾊を変える <com.google.android.material.slider.Slider ...

    style="@style/Widget.MyApp.Slider" ... /> <style name="ThemeOverlay.MyApp.Slider" parent=""> <item name="colorPrimary">#1976D2</item> <item name="colorOnBackground">#1976D2</item> </style>

  138. TextInputLayout

  139. 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

  140. 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

  141. TextInputLayout の⾊を変える（１） <style name="Widget.MyApp.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> </style> <style

    name="ThemeOverlay.MyApp.TextInputEditText.FilledBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox"> <item name="colorPrimary">#1976D2</item> </style>

  142. TextInputLayout の⾊を変える（１） <style name="Widget.MyApp.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> </style> <style

    name="ThemeOverlay.MyApp.TextInputEditText.FilledBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox"> <item name="colorPrimary">#1976D2</item> </style> Box をもう少し薄くしたい

  143. TextInputLayout の⾊を変える（２） <style name="Widget.MyApp.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> <item name="boxBackgroundColor">@color/text_input_layout_box_background</item> </style>

    <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_hovered="true"/> <item android:alpha="0.06" android:color="?attr/colorOnSurface" android:state_focused="true"/> <item android:alpha="0.04" android:color="?attr/colorOnSurface" android:state_enabled="false"/> <item android:alpha="0.06" android:color="?attr/colorOnSurface"/> </selector> res/color/text_input_layout_box_background.xml

  144. Tab

  145. #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

  146. Tab の⾊を変える（１） <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> </style> <style name="ThemeOverlay.MyApp.TabLayout"

    parent=""> <item name="colorPrimary">#1976D2</item> </style> <com.google.android.material.tabs.TabLayout style="@style/Widget.MyApp.TabLayout" android:layout_width="match_parent" android:layout_height="wrap_content">

  147. Tab の⾊を変える（１） <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> </style> <style name="ThemeOverlay.MyApp.TabLayout"

    parent=""> <item name="colorPrimary">#1976D2</item> </style> 薄い⻘にしたい <com.google.android.material.tabs.TabLayout style="@style/Widget.MyApp.TabLayout" android:layout_width="match_parent" android:layout_height="wrap_content">

  148. Tab の⾊を変える（２） <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> </style>

    res/color/tab_text.xml <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_selected="true" /> <item android:alpha="0.40" android:color="?attr/colorPrimary" /> </selector>

  149. Tab の⾊を変える（２） <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> </style>

    res/color/tab_text.xml unselected の ripple も⻘にしたい <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_selected="true" /> <item android:alpha="0.40" android:color="?attr/colorPrimary" /> </selector>

  150. <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="0.08" android:color="?attr/colorPrimary" android:state_pressed="true" /> <item android:alpha="0.16" android:color="?attr/colorPrimary"

    android:state_focused="true" android:state_hovered="true" /> <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_focused="true" /> <item android:alpha="0.04" android:color="?attr/colorPrimary" android:state_hovered="true" /> <item android:alpha="0.00" android:color="?attr/colorPrimary" /> </selector> Tab の⾊を変える（３） <style name="Widget.MyApp.TabLayout" parent="Widget.MaterialComponents.TabLayout"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> <item name="tabRippleColor">@color/tab_ripple</item> </style> res/color/tab_ripple.xml

  151. Bottom Navigation

  152. #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

  153. <com.google.android.material.bottomnavigation.BottomNavigationView style="@style/Widget.MyApp.BottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content"> BottomNavigationView の⾊を変える（１） <style name="Widget.MyApp.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> </style> <style name="ThemeOverlay.MyApp.BottomNavigationView" parent=""> <item name="colorPrimary">#1976D2</item> </style>

  154. <com.google.android.material.bottomnavigation.BottomNavigationView style="@style/Widget.MyApp.BottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content"> BottomNavigationView の⾊を変える（１） <style name="Widget.MyApp.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> </style> <style name="ThemeOverlay.MyApp.BottomNavigationView" parent=""> <item name="colorPrimary">#1976D2</item> </style> 薄い⻘にしたい

  155. <com.google.android.material.bottomnavigation.BottomNavigationView style="@style/Widget.MyApp.BottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content"> BottomNavigationView の⾊を変える（２） <style name="Widget.MyApp.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> </style> <style name="ThemeOverlay.MyApp.BottomNavigationView" parent=""> <item name="colorPrimary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> </style>

  156. <com.google.android.material.bottomnavigation.BottomNavigationView style="@style/Widget.MyApp.BottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content"> BottomNavigationView の⾊を変える（２） <style name="Widget.MyApp.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> </style> <style name="ThemeOverlay.MyApp.BottomNavigationView" parent=""> <item name="colorPrimary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> </style> もっと薄くしたい

  157. <style name="Widget.MyApp.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView"> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> <item name="itemIconTint">@color/bottom_nav_item</item> <item name="itemTextColor">@color/bottom_nav_item</item> </style>

    <style name="ThemeOverlay.MyApp.BottomNavigationView" parent=""> <item name="colorPrimary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> </style> BottomNavigationView の⾊を変える（３） <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:alpha="1.0" android:color="?attr/colorPrimary" android:state_checked="true"/> <item android:alpha="0.3" android:color="?attr/colorOnSurface"/> </selector> res/color/bottom_nav_item.xml

  158. CardView

  159. #FFFFFF MaterialCardView の style colorSurface : alpha 100% #212121 #FFFFFF

    colorPrimary : alpha 100% colorPrimary : alpha 8% Widget.MaterialComponents.CardView isChecked = true

  160. <com.google.android.material.card.MaterialCardView style="@style/Widget.MyApp.CardView" android:layout_width="match_parent" android:layout_height="wrap_content"> MaterialCardView の⾊を変える（１） <style name="Widget.MyApp.CardView" parent="Widget.MaterialComponents.CardView"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CardView</item> </style> <style name="ThemeOverlay.MyApp.CardView" parent=""> <item name="colorPrimary">#1976D2</item> <item name="borderlessButtonStyle">@style/Widget.MaterialComponents.Button.TextButton</item> </style>

  161. AppBarLayout, Toolbar

  162. #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%

  163. #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%)

  164. AppBarLayout 内の⾊を変える（１） <com.google.android.material.appbar.AppBarLayout style="@style/Widget.MaterialComponents.AppBarLayout.Primary" android:layout_width="match_parent" android:layout_height="128dp"> <com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:expandedTitleTextAppearance="@style/TextAppearance.MyApp.CollapsingToolbar.Expanded">

    <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.MaterialComponents.Toolbar.Primary" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout>

  165. BottomAppBar

  166. #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%

  167. <com.google.android.material.bottomappbar.BottomAppBar style="@style/Widget.MyApp.BottomAppBar" android:layout_width="match_parent" android:layout_height="wrap_content"> BottomAppBar の⾊を変える（１） <style name="Widget.MyApp.BottomAppBar" parent="Widget.MaterialComponents.BottomAppBar"> <item

    name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomAppBar</item> </style> <style name="ThemeOverlay.MyApp.BottomAppBar" parent=""> <item name="colorControlNormal">#1976D2</item> </style>

  168. ActionBar

  169. 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

  170. 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

  171. 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%