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

by Yuki Anzai

Slide 1

Slide 1 text

Material Design Components ΧελϚΠζ࠷લઢ ͋Μ͍͟Ώ͖ʢ@yanzmʣ Google Developer Experts for Android GDG DevFest 2020

Slide 2

Slide 2 text

Material Design Components • Material Design ͕ఏএ͍ͯ͠Δ৭΍ܗɺλΠϙάϥϑΟɺΞχϝʔγϣ ϯΛ࢖ͬͨίϯϙʔωϯτ͕࣮૷͞Ε͍ͯΔϥΠϒϥϦ • https://material.io/ • MDCʹ࣮૷͞Ε͍ͯΔίϯϙʔωϯτΛ࢖͏ʹ͸ MDC ͷςʔϚΛ࢖͏ඞ ཁ͕͋Δ implementation "com.google.android.material:material:1.2.1"

Slide 3

Slide 3 text

MDC ͷςʔϚΛ࢖͏

Slide 4

Slide 4 text

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 Λ໌ࣔతʹ ద༻͢Δඞཁ͕͋Δ

Slide 5

Slide 5 text

MDC ͷςʔϚ • ৽نϓϩδΣΫτ • non-Bridge ͷ MDC ςʔϚΛϕʔεςʔϚʹ͢Δ • طଘϓϩδΣΫτͷҠߦ • ϕʔεςʔϚΛ non-Bridge ͷ MDC ςʔϚʹมߋ͢ΔͱӨڹ͕େ͖͍ ͷͰɺBridge ΛϕʔεςʔϚʹͯ͠গͣͭ͠ઃఆΛ௥Ճ͢Δ • ࠷ऴతʹ͸ Theme.MaterialComponents ΛϕʔεςʔϚʹ͢Δ

Slide 6

Slide 6 text

Bridge ΛϕʔεςʔϚʹ͢Δ ... ... AppCompat ΍ MaterialComponents ͷωʔϛϯάϧʔϧʹ߹Θͤͯ Theme.[MyApp].... ͱ͍͏໊લʹ͢Δͷ͕͓͢͢Ί

Slide 7

Slide 7 text

Bridge Ͱͷઃఆ • MDC ͷ style Λઃఆ͠ͳ͍ → AppCompat ͱಉ͡ ...

Slide 8

Slide 8 text

Bridge Ͱͷઃఆ • MDC ͷ style Λઃఆ͠ͳ͍ → AppCompat ͱಉ͡ • MDC ͷ style Λઃఆ → MaterialComponents ͱಉ͡ ...

Slide 9

Slide 9 text

<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item> Bridge Ͱͷઃఆ • MDC ͷ style Λઃఆ͠ͳ͍ → AppCompat ͱಉ͡ • MDC ͷ style Λઃఆ → MaterialComponents ͱಉ͡

Slide 10

Slide 10 text

TextInputLayout AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .TextInputLayout .FilledBox Τϥʔ MaterialComponents Τϥʔ Widget.MaterialComponents .TextInputLayout .OutlinedBox

Slide 11

Slide 11 text

MDC ͷ Color ଐੑ

Slide 12

Slide 12 text

colorAccent colorPrimaryDark colorPrimary AppCompat colorError android:colorBackground colorControlNormal

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 ςʔϚܧঝʹΑΔҾ͖ܧ͗

Slide 15

Slide 15 text

Slide 16

Slide 16 text

#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

Slide 17

Slide 17 text

#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

Slide 18

Slide 18 text

#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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

#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

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

• 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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

• ύωϧతͳίϯϙʔωϯτͷ৭ʹ࢖ΘΕΔ • MaterialCardView, NavigationView, BottomNavigationView, BottomAppBar, TabLayout, PopupMenu, AlertDialog ʢMaterialAlertDialogBuilderʣͳͲͷද໘ͷ৭ colorSurface

Slide 28

Slide 28 text

Slide 29

Slide 29 text

colorError • Τϥʔ༻ͷจࣈ৭΍ΞΠίϯͷ Tint ʹ࢖ΘΕΔ • TextInputLayout ͷΤϥʔ࣌ͷจࣈ৭΍ΞΠίϯͷ৭ɺ BottomNavigationView Ͱ࢖ΘΕΔ BadgeDrawable ͷ৭

Slide 30

Slide 30 text

Slide 31

Slide 31 text

• window ͷഎܠʹ࢖ΘΕΔ • Theme.Material, Theme.Material.Light Ͱ android:windowBackground ʹࢦఆ͞Ε͍ͯΔ android:colorBackground ?attr/colorBackground android:colorBackground #FFFFFF Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.Light.DarkActionBar.Bridge android:colorBackground #FAFAFA

Slide 32

Slide 32 text

Slide 33

Slide 33 text

• AppCompat ͔Β͋Δଐੑ • App bar ͷ Navigation icon, Over fl ow icon ͷ Tint ͱͯ͠࢖ΘΕΔ • MDC ͷ ActionBar, BottomAppBar, Toolbar ༻ͷ style Ͱ͸্ॻ͖ࢦఆ͞Ε͍ͯΔ • App bar ͷ Menu icon ʹࢦఆ͢Δ vector drawable ͸ tint ʹ colorControlNormal Λ ࢦఆ͢Δ colorControlNormal

Slide 34

Slide 34 text

MDC ͷ Color ଐੑͷར༻

Slide 35

Slide 35 text

MDC ༻ Color ଐੑͷར༻ colorPrimary : alpha 100% colorOnSurface : alpha 42% colorError : alpha 100% TextInputLayout.FilledBox MaterialComponents.Light.DarkActionBar.Bridge colorOnSurface : alpha 12%

Slide 36

Slide 36 text

https://material.io/develop/android/components/text- fi elds

Slide 37

Slide 37 text

... <item name="boxBackgroundColor">@color/mtrl_filled_background_color</item> ... mtrl_filled_background_color.xml

Slide 38

Slide 38 text

MDC ͷ Color ΧελϚΠζ

Slide 39

Slide 39 text

MDC ͷ Color ΧελϚΠζ • ςʔϚͷ Color ଐੑ஋Λมߋ͢Δ • શ Component ʹӨڹ͢Δ • materialThemeOverlay Λࢦఆ͢Δ • Component ༻ͷಠࣗ style Ͱࢦఆ͢Δ • ಠࣗ style Λࢦఆͨ͠ Component ʹ͚ͩӨڹ͢Δ <item name="colorPrimary">#1976D2</item>

Slide 40

Slide 40 text

materialThemeOverlay Λࢦఆ͢Δʢ̍ʣ • ಠࣗ style ͷϕʔεʹ͍ͨ͠ Component ͷ style Λௐ΂Δ

Slide 41

Slide 41 text

materialThemeOverlay Λࢦఆ͢Δʢ̎ʣ • ϕʔεʹ͢Δ style Λܧঝͨ͠ style Λ༻ҙ͢Δ

Slide 42

Slide 42 text

materialThemeOverlay Λࢦఆ͢Δʢ̏ʣ • ϕʔεʹ͢Δ style Ͱ materialThemeOverlay ͕ࢦఆ͞Ε͍ͯΔ͔ௐ΂Δ <item name="materialThemeOverlay"> @style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox </item> ...

Slide 43

Slide 43 text

materialThemeOverlay Λࢦఆ͢Δʢ̐ʣ • ϕʔεʹ͢Δ style Ͱ materialThemeOverlay ʹࢦఆ͞Ε͍ͯΔ ThemeOverlay Λܧঝͨ͠ςʔϚΛ༻ҙ͠ɺColor ଐੑΛ্ॻ͖͢Δ <item name="colorPrimary">#1976D2</item> materialThemeOverlay ͕ࢦఆ͞Ε͍ͯͳ͍ͱ͖͸ parent=""

Slide 44

Slide 44 text

Slide 45

Slide 45 text

materialThemeOverlay Λࢦఆ͢Δʢ̑ʣ • Component ༻ͷಠࣗ style ͰɺmaterialThemeOverlay ʹ༻ҙͨ͠ ThemeOverlay Λࢦఆ͢Δ <item name="materialThemeOverlay"> @style/ThemeOverlay.MyApp.TextInputEditText.FilledBox </item>

Slide 46

Slide 46 text

materialThemeOverlay Λࢦఆ͢Δʢ̒-̍ʣ • Component ༻ͷಠࣗ style Λ Component ʹࢦఆ͢Δ

Slide 47

Slide 47 text

materialThemeOverlay Λࢦఆ͢Δʢ̒-̎ʣ • Component ༻ͷಠࣗ style Λ Component ͷσϑΥϧτ style ςʔϚଐ ੑʹࢦఆ͢Δ <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout.FilledBox</item>

Slide 48

Slide 48 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - Button -

Slide 49

Slide 49 text

• Bridge ͱ non-Bridge ͰҟͳΔ • ࣮ࡍʹੜ੒͞ΕΔ ͷΠϯελϯε • AppCompat : AppCompatButton • MaterialComponents.Bridge : AppCompatButton • MaterialComponents : MaterialButton • Bridge ͩͱ MDC ͷ Button style Λࢦఆͯ͠΋ҙਤͨ͠௨ΓʹͳΒͳ͍ Button

Slide 50

Slide 50 text

Button AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .Button Τϥʔ MaterialComponents Τϥʔ Widget.MaterialComponents .Button .OutlinedButton

Slide 51

Slide 51 text

Bridge + MaterialButton

Slide 52

Slide 52 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - FloatingActionButton -

Slide 53

Slide 53 text

• MDC ͷ style Λࢦఆ͢Δ FloatingActionButton

Slide 54

Slide 54 text

FloatingActionButton AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents.FloatingActionButton Τϥʔ MaterialComponents

Slide 55

Slide 55 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - CheckBox -

Slide 56

Slide 56 text

• Bridge ͱ non-Bridge ͰҟͳΔ • ࣮ࡍʹੜ੒͞ΕΔ ͷΠϯελϯε • AppCompat : AppCompatCheckBox • MaterialComponents.Bridge : AppCompatCheckBox • MaterialComponents : MaterialCheckBox • Bridge Ͱ MDC ͷ CheckBox style Λࢦఆ͢ΔͱམͪΔ CheckBox

Slide 57

Slide 57 text

Bridge Ͱ MDC ͷ style Λద༻͢Δ Crash!

Slide 58

Slide 58 text

CheckBox AppCompat MaterialComponents .Bridge CheckBox MaterialCheckBox + useMaterialThemeColors="true" MaterialComponents Τϥʔ MaterialCheckBox OK ?

Slide 59

Slide 59 text

CheckBox AppCompat MaterialComponents .Bridge CheckBox MaterialCheckBox + useMaterialThemeColors="true" MaterialComponents Τϥʔ MaterialCheckBox OK colorControlActivated

Slide 60

Slide 60 text

#03DAC6 #008577 colorSecondary colorControlActivated colorAccent AppCompat MaterialComponents.Bridge MaterialComponents attr ࢀর colorControlActivated colorAccent ςʔϚܧঝʹΑΔҾ͖ܧ͗ Light.DarkActionBar #03DAC6 #008577 #03DAC6 colorControlActivated colorAccent #008577 #008577

Slide 61

Slide 61 text

Bridge Ͱ MDC ͱಉ͡ݟͨ໨ʹ͢Δ <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> <item name="colorAccent">?attr/colorSecondary</item>

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - RadioButton -

Slide 65

Slide 65 text

• Bridge ͱ non-Bridge ͰҟͳΔ • ࣮ࡍʹੜ੒͞ΕΔ ͷΠϯελϯε • AppCompat : AppCompatRadioButton • MaterialComponents.Bridge : AppCompatRadioButton • MaterialComponents : MaterialRadioButton • Bridge Ͱ MDC ͷ RadioButton style Λࢦఆ͢ΔͱམͪΔ RadioButton

Slide 66

Slide 66 text

Bridge Ͱ MDC ͱಉ͡ݟͨ໨ʹ͢Δ <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> <item name="colorAccent">?attr/colorSecondary</item>

Slide 67

Slide 67 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - Switch -

Slide 68

Slide 68 text

• SwitchMaterial Λ࢖͏ • Bridge Ͱ MDC ͷ Switch style Λࢦఆ͢ΔͱམͪΔ Switch ʢMaterialSwitch ͡Όͳ͍Αʂʣ

Slide 69

Slide 69 text

Bridge Ͱ MDC ͱಉ͡ݟͨ໨ʹ͢Δ <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> <item name="colorAccent">?attr/colorSecondary</item>

Slide 70

Slide 70 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - TextInputLayout -

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.Light.DarkActionBar.Bridge • Bridge ͱ non-Bridge Ͱ error ͷ৭͕ҟͳΔ • Bridge Ͱ error ͷ৭Λ non-Bridge ͱಉ͡ʹ͢Δʹ͸ • colorError Λࢦఆ͢Δ or android:theme Λࢦఆ͢Δ TextInputLayout

Slide 73

Slide 73 text

<item name="colorError">#B00020</item> colorErrorΛࢦఆ͢Δ <item name="colorError">@color/design_default_color_error</item> or #CF6679 #B00020 Light ςʔϚ : @color/design_default_color_error Dark ςʔϚ : @color/design_dark_default_color_error

Slide 74

Slide 74 text

• ThemeOverlay.MaterialComponents.[Light|Dark] Λࢦఆ͢Δ android:theme Λࢦఆ͢Δ ...

Slide 75

Slide 75 text

ThemeOverlay.MaterialComponents • color ؔ܎ͷଐੑ͚ͩࢦఆ͞Ε͍ͯΔςʔϚ ThemeOverlay.MaterialComponents ThemeOverlay.MaterialComponents.Light ThemeOverlay.MaterialComponents.Dark

Slide 76

Slide 76 text

<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> #FFFFFF #000000 #FFFFFF #000000 #B00020 #FFFFFF ThemeOverlay.MaterialComponents.Light ThemeOverlay.MaterialComponents.Dark #121212 <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> #FFFFFF #000000 #CF6679 #121212 #FFFFFF

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - Tab -

Slide 79

Slide 79 text

Tab AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .TabLayout Τϥʔ MaterialComponents Τϥʔ Widget.MaterialComponents .TabLayout .Colored

Slide 80

Slide 80 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - Bottom Navigation -

Slide 81

Slide 81 text

BottomNavigationView AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .BottomNavigationView Τϥʔ MaterialComponents Τϥʔ Widget.MaterialComponents .BottomNavigationView .Colored

Slide 82

Slide 82 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - CardView -

Slide 83

Slide 83 text

• MaterialCardView Λ࢖͏ • MDC ͷ style Λࢦఆ͢Δ CardView

Slide 84

Slide 84 text

MaterialCardView AppCompat MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents.CardView Τϥʔ MaterialComponents Τϥʔ #1976D2 #E3F2FD ?attr/borderlessButtonStyle

Slide 85

Slide 85 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - AppBarLayout, Toolbar -

Slide 86

Slide 86 text

• MaterialToolbar Λ࢖͏ • AppBarLayout ͱҰॹʹ࢖͏࣌͸ MDC ͷ style Λࢦఆ͢Δ Toolbar

Slide 87

Slide 87 text

MaterialToolbar MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .Toolbar MaterialComponents Widget.MaterialComponents .Toolbar.Primary

Slide 88

Slide 88 text

AppBarLayout + MaterialToolbar MaterialComponents .Bridge style ࢦఆͳ͠ or Widget.MaterialComponents .Toolbar Widget.MaterialComponents .Toolbar.Surface MaterialComponents Widget.MaterialComponents .Toolbar.Primary

Slide 89

Slide 89 text

Bridge Λ࢖͏ͱ͖ͷ஫ҙ఺ - BottomAppBar -

Slide 90

Slide 90 text

BottomAppBar MaterialComponents .Bridge style ࢦఆͳ͠ Widget.MaterialComponents .BottomAppBar MaterialComponents Widget.MaterialComponents .BottomAppBar .Colored

Slide 91

Slide 91 text

Dark mode

Slide 92

Slide 92 text

Dark mode • night mode : API Level 8 ʙ • Dark mode ޲͚ͷઃఆ͸ [values]-night-v8 ʹࢦఆ • ઃఆ → σΟεϓϨΠ → μʔΫςʔϚ • όοςϦηʔόʔϞʔυ

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Selected Tab ͷ৭Λม͑Δ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="colorPrimary">#1976D2</item>

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Dark mode ͷ Selected Tab ͷ৭Λม͑Δ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> res/values-night-v8/themes.xml <style name="ThemeOverlay.MyApp.TabLayout" parent=""> <item name="colorPrimary">#1976D2</item> res/values/themes.xml

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

normal Dark mode non-Bridge Bridge TabLayout .PrimarySurface

Slide 101

Slide 101 text

Android Studio 4.1

Slide 102

Slide 102 text

Android Studio 4.1 • ৽نϓϩδΣΫτΛ࡞੒ͨ͠ͱ͖ͷΞϓϦͷϕʔεςʔϚ͕ Theme.MaterialComponents.DayNight.DarkActionBar ʹͳͬͨ • ςʔϚͷఆٛઌ͕ styles.xml ͔Β themes.xml ʹมΘͬͨ • ੜ੒͞ΕΔΞϓϦͷςʔϚ໊͕ Theme.[ΞϓϦ໊] ʹมΘͬͨ

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

·ͱΊ • ৽͍͠ϓϩδΣΫτΛ࡞Δͱ͖͸ no-Bridge Λϕʔεʹ͢Δ • طଘͷϓϩδΣΫτΛҠߦ͢Δͱ͖͸ Bridge Λϕʔεʹͯ͠ঃʑʹద༻Λ޿͛Δ • Bridge ςʔϚʹ͸མͱ͕݀͋͠ΔͷͰ஫ҙ͢Δ • MaterialButton, MaterialCheckBox, MaterialRadioButton, SwitchMaterial Λ࢖͏ • ৭ΛΧελϚΠζ͢Δͱ͖͸ materialThemeOverlay Λࢦఆ͢Δ • Dark Mode ରԠ͕Μ͹Ζ͏

Slide 106

Slide 106 text

ΧελϚΠζ Ϩγϐू

Slide 107

Slide 107 text

Button

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Button ͷ৭Λม͑Δ <item name="colorPrimary">#1976D2</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Button.Blue</item> <item name="materialButtonStyle">@style/Widget.MyApp.Button</item> or

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

Icon ʹ Tint ͠ͳ͍ app:iconTint="@null" app:iconTint="#ff9573"

Slide 112

Slide 112 text

Button ͷܗΛม͑Δ • shapeAppearance Λࢦఆ͢Δ <item name="shapeAppearance">@style/ShapeAppearance.MyApp.Button</item> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> <item name="cornerFamily">rounded</item> <item name="cornerSize">20dp</item>

Slide 113

Slide 113 text

FloatingActionButton

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

<item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.FloatingActionButton</item> FloatingActionButton ͷ৭Λม͑Δ <item name="colorSecondary">#1976D2</item> <item name="colorOnSecondary">#FFFFFF</item>

Slide 117

Slide 117 text

CheckBox

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

CheckBox ͷ৭Λม͑Δʢ̍ʣ ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> Bridge non-Bridge <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item>

Slide 120

Slide 120 text

Slide 121

Slide 121 text

CheckBox ͷ৭Λม͑Δʢ̎ʣ ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> Bridge non-Bridge <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item>

Slide 122

Slide 122 text

Slide 123

Slide 123 text

CheckBox ͷ৭Λม͑Δʢ̏ʣ res/color/check_box_tint.xml

Slide 124

Slide 124 text

CheckBox ͷ৭Λม͑Δʢ̏ʣ res/color/check_box_tint.xml ripple ΋੨ʹ͍ͨ͠

Slide 125

Slide 125 text

CheckBox ͷ৭Λม͑Δʢ̐ʣ <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> <item name="colorControlHighlight">#1a1976D2</item> <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.CheckBox</item>

Slide 126

Slide 126 text

CheckBox ͷ৭Λม͑Δʢ̑ʣ res/drawable/check_box_background.xml res/color/check_box_ripple_color.xml

Slide 127

Slide 127 text

ಠࣗը૾ͷ CheckBox ʹ͢Δ • app:useMaterialThemeColors="false" Λࢦఆ͢Δ • → MDC Color ʹΑͬͯ Tint ͞Εͳ͍

Slide 128

Slide 128 text

RadioButton

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

Switch

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

Switch ͷ৭Λม͑Δʢ̍ʣ ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item> <item name="colorAccent">?attr/colorSecondary</item> <item name="colorSecondary">#1976D2</item> Bridge non-Bridge <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CompoundButton.Switch</item>

Slide 133

Slide 133 text

Slide 134

Slide 134 text

Switch ͷ৭Λม͑Δʢ̎ʣ res/color/switch_track_tint.xml

Slide 135

Slide 135 text

Slider

Slide 136

Slide 136 text

#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

Slide 137

Slide 137 text

<item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Slider</item> Slider ͷ৭Λม͑Δ <item name="colorPrimary">#1976D2</item> <item name="colorOnBackground">#1976D2</item>

Slide 138

Slide 138 text

TextInputLayout

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

TextInputLayout ͷ৭Λม͑Δʢ̍ʣ ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> <item name="colorPrimary">#1976D2</item>

Slide 142

Slide 142 text

TextInputLayout ͷ৭Λม͑Δʢ̍ʣ ... <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> <item name="colorPrimary">#1976D2</item> Box Λ΋͏গ͠ബ͍ͨ͘͠

Slide 143

Slide 143 text

TextInputLayout ͷ৭Λม͑Δʢ̎ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TextInputEditText.FilledBox</item> <item name="boxBackgroundColor">@color/text_input_layout_box_background</item> res/color/text_input_layout_box_background.xml

Slide 144

Slide 144 text

Tab

Slide 145

Slide 145 text

#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

Slide 146

Slide 146 text

Tab ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="colorPrimary">#1976D2</item>

Slide 147

Slide 147 text

Tab ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="colorPrimary">#1976D2</item> ബ͍੨ʹ͍ͨ͠

Slide 148

Slide 148 text

Tab ͷ৭Λม͑Δʢ̎ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> res/color/tab_text.xml

Slide 149

Slide 149 text

Tab ͷ৭Λม͑Δʢ̎ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> res/color/tab_text.xml unselected ͷ ripple ΋੨ʹ͍ͨ͠

Slide 150

Slide 150 text

Tab ͷ৭Λม͑Δʢ̏ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.TabLayout</item> <item name="tabTextColor">@color/tab_text</item> <item name="tabRippleColor">@color/tab_ripple</item> res/color/tab_ripple.xml

Slide 151

Slide 151 text

Bottom Navigation

Slide 152

Slide 152 text

#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

Slide 153

Slide 153 text

BottomNavigationView ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> <item name="colorPrimary">#1976D2</item>

Slide 154

Slide 154 text

BottomNavigationView ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> <item name="colorPrimary">#1976D2</item> ബ͍੨ʹ͍ͨ͠

Slide 155

Slide 155 text

BottomNavigationView ͷ৭Λม͑Δʢ̎ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> <item name="colorPrimary">#1976D2</item> <item name="colorOnSurface">#1976D2</item>

Slide 156

Slide 156 text

Slide 157

Slide 157 text

<item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomNavigationView</item> <item name="itemIconTint">@color/bottom_nav_item</item> <item name="itemTextColor">@color/bottom_nav_item</item> <item name="colorPrimary">#1976D2</item> <item name="colorOnSurface">#1976D2</item> BottomNavigationView ͷ৭Λม͑Δʢ̏ʣ res/color/bottom_nav_item.xml

Slide 158

Slide 158 text

CardView

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

MaterialCardView ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.CardView</item> <item name="colorPrimary">#1976D2</item> <item name="borderlessButtonStyle">@style/Widget.MaterialComponents.Button.TextButton</item>

Slide 161

Slide 161 text

AppBarLayout, Toolbar

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

AppBarLayout ಺ͷ৭Λม͑Δʢ̍ʣ

Slide 165

Slide 165 text

BottomAppBar

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

BottomAppBar ͷ৭Λม͑Δʢ̍ʣ <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.BottomAppBar</item> <item name="colorControlNormal">#1976D2</item>

Slide 168

Slide 168 text

ActionBar

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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%

Slide 172

Slide 172 text

MaterialAlertDialogBuilder

Slide 173

Slide 173 text

AppCompat Bridge non-Bridge Bridge non-Bridge androidx.appcompat.app.AlertDialog.Builder MaterialAlertDialogBuilder colorPrimary colorAccent