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

GDG DevFest 2020
https://gdg-tokyo.connpass.com/event/190079/

Material Design Components for Android の 1.2.0 がリリースされました。この講演では最新の MDC for Android のカスタマイズ方法について解説します。特に AppCompat とは異なる MDC で定義されている色や shape の attribute について取り上げます。

Transcript

1. Material Design Components ΧελϚΠζ࠷લઢ ͋Μ͍͟Ώ͖ʢ@yanzmʣ Google Developer Experts for Android GDG DevFest 2020
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.DarkActio
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.DarkActio
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.DarkActio 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.DarkActio 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.DarkActio 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.DarkActio 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.DarkActio 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.DarkActio colorControlNormal
33. • AppCompat ͔Β͋Δଐੑ • App bar ͷ Navigation icon, Over fl ow 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- fi elds
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.DarkActio 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%
172. MaterialAlertDialogBuilder
173. AppCompat Bridge non-Bridge Bridge non-Bridge androidx.appcompat.app.AlertDialog.Builder MaterialAlertDialogBuilder colorPrimary colorAccent