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

Slide 1

Slide 1 text

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

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

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

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.DarkAc 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ﬂ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-ﬁ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 <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%