MaterialComponentsのテーマカラーがどこに適用されるのかを調べて見た #Android

Androidではテーマでカラースキームを定義しますが、あらかじめ定義されている属性がどこの色指定になっているのかが分かりにくく、調べるのが結構大変ですので、どこを変更したらどこが変わるのかを調べて見ました。
AndroidStudioで新規プロジェクトを作成した時のデフォルトのテーマは以下のようになっています。

themes.xml

<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <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>
</style>
<style name="Theme.MyApplication.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.MyApplication.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

この指定の状態と、上記の指定をすべて外してTheme.MaterialComponents.DayNight.DarkActionBarだけを指定した状態(ThemeOverlayの指定は外しています)で様々なコントロールを配置しすると以下のような表示になります。
TextViewは未指定と、TextAppearance.MaterialComponents.*を指定したものを配置しています、Headlineはフォントサイズが大きくなってしまうため、フォントサイズだけ個別に16spを指定しています。

デフォルト設定	Theme.MaterialComponents .DayNight.DarkActionBarのみ

次に、これらが一色になる設定を探ってみましょう。

themes.xml

<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/red</item>
    <item name="colorPrimaryVariant">@color/red</item>
    <item name="colorOnPrimary">@color/red</item>
    <item name="colorSecondary">@color/red</item>
    <item name="colorSecondaryVariant">@color/red</item>
    <item name="colorOnSecondary">@color/red</item>
    <!-- 以下追加 -->
    <item name="android:windowBackground">@color/red</item>
    <item name="android:statusBarColor">@color/red</item>
    <item name="android:navigationBarColor">@color/red</item>
    <item name="colorSurface">@color/red</item>
    <item name="colorOnSurface">@color/red</item>
    <item name="colorError">@color/red</item>
    <item name="colorControlNormal">@color/red</item>
    <item name="colorButtonNormal">@color/red</item>
    <item name="colorSwitchThumbNormal">@color/red</item>
    <item name="android:colorForeground">@color/red</item>
    <item name="android:textColorPrimary">@color/red</item>
    <item name="android:textColorSecondary">@color/red</item>
    <item name="android:textColorTertiary">@color/red</item>
    <item name="android:textColorPrimaryDisableOnly">@color/red</item>
</style>

最初の指定を全部赤指定にしてみたものが左です、残りの要素も赤一色になるように設定したものが右です。

デフォルトで指定されている色を赤に	全部が赤になるTheme

ドロップシャドウの部分が残っています。これはandroid:ambientShadowAlpha android:spotShadowAlphaでα値を、また、API 28以上であれば、android:outlineAmbientShadowColor android:outlineSpotShadowColor で色を変更することができるようですが、ここまで変更することは滅多にないでしょうから外しています。

colorPrimaryVariantとcolorSecondaryVariantはandroid:statusBarColorへの指定以外では使われていないようなので以下のThemeで赤一色に変わります。

themes.xml

<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/red</item>
    <item name="colorOnPrimary">@color/red</item>
    <item name="colorSecondary">@color/red</item>
    <item name="colorOnSecondary">@color/red</item>
    <item name="android:windowBackground">@color/red</item>
    <item name="android:statusBarColor">@color/red</item>
    <item name="android:navigationBarColor">@color/red</item>
    <item name="colorSurface">@color/red</item>
    <item name="colorOnSurface">@color/red</item>
    <item name="colorError">@color/red</item>
    <item name="colorControlNormal">@color/red</item>
    <item name="colorButtonNormal">@color/red</item>
    <item name="colorSwitchThumbNormal">@color/red</item>
    <item name="android:colorForeground">@color/red</item>
    <item name="android:textColorPrimary">@color/red</item>
    <item name="android:textColorSecondary">@color/red</item>
    <item name="android:textColorTertiary">@color/red</item>
    <item name="android:textColorPrimaryDisableOnly">@color/red</item>
</style>

次に、各項目の色を変更してどこに反映されるかを検証しましょう。指定はいったん全部黒にしてしまって、一カ所ずつ赤に変更してみます。android:windowBackground android:statusBarColor android:navigationBarColorはどこの指定なのか明らかなのと、全部が塗りつぶされていると逆になんの色が変わっているのか分かりにくいので指定を外してしまいます。

themes.xml

<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">@color/black</item>
    <item name="colorOnPrimary">@color/black</item>
    <item name="colorSecondary">@color/black</item>
    <item name="colorOnSecondary">@color/black</item>

    <item name="colorSurface">@color/black</item>
    <item name="colorOnSurface">@color/black</item>
    <item name="colorError">@color/black</item>
    <item name="colorControlNormal">@color/black</item>
    <item name="colorButtonNormal">@color/black</item>
    <item name="colorSwitchThumbNormal">@color/black</item>
    <item name="android:colorForeground">@color/black</item>
    <item name="android:textColorPrimary">@color/black</item>
    <item name="android:textColorSecondary">@color/black</item>
    <item name="android:textColorTertiary">@color/black</item>
    <item name="android:textColorPrimaryDisableOnly">@color/black</item>
</style>

初期状態	`colorPrimary`

`colorOnPrimary`	`colorSecondary`

`colorOnSecondary`	`colorSurface`

`colorOnSurface`	`colorError`

`colorControlNormal`	`colorButtonNormal`

`colorSwitchThumbNormal`	`android:colorForeground`

`android:textColorPrimary`	`android:textColorSecondary`

`android:textColorTertiary`	`android:textColor` `PrimaryDisableOnly`