Android12 ---- Material You 应用_com.google.android.material:material

背景

       Google android S 新特性，当你更换壁纸，整个手机主题的颜色会根据壁纸的配色方案而改变。也就说，每当你更新壁纸，你的手机界面也会焕然一新

       当用户在 Android 12 设备上更改壁纸时，系统会分析图像以选择一种颜色，并使用初始种子颜色通过算法选择主要（Primary）、次要（Secondary）、第三（Tertiary）和错误（Error）颜色。同时，它应用了色彩理论和可访问性规则。从这些颜色中，该算法创建从 0% 亮度（黑色）到 100%（白色）的色调调色板。

环境准备

1、应用的最低 SDK 设置为 31 或更高版本。

2、material主题包应用升级到1.5.0或以上 'com.google.android.material:material:1.5.0'

3、Material You 主题生成网站

Material Theme Builder

       添加自定义的颜色点击EXPORT导出XML，会生成两套主题即日常模式和黑暗模式（values，valu-night），这些文件可以按原样复制替换，但必须更改AndroidManifest.xml 或主题文件中的主题名称以相互匹配。工具导出主题的默认名称是 AppTheme。

//生成的主题继承自Material3
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    ......
    <item name="colorColor90">#286b2a</item>
    <item name="colorOnColor90">#ffffff</item>
    <item name="colorColor90Container">#abf5a3</item>
    <item name="colorOnColor90Container">#012104</item>
    <item name="harmonizeColor90">false</item>
    <item name="colorColor29">#00639c</item>
    <item name="colorOnColor29">#ffffff</item>
    <item name="colorColor29Container">#cce5ff</item>
    <item name="colorOnColor29Container">#001d33</item>
    <item name="harmonizeColor29">false</item>
    <item name="colorPrimaryInverse">@color/md_theme_light_primaryInverse</item>
</style>

对应方式

        Material 库中的DynamicColors类利用 Activity Lifecycle Callbacks来确定何时以及如何应用颜色叠加。使用提供的 API 调用，可以将动态颜色应用于activity或整个应用程序。还可以确定应在何时何地应用动态颜色。

       避免意外影响，应确保应用程序代码组件引用Material主题属性即

android:color="?attr/colorPrimary"，而不是应用任何硬编码颜色（HEX代码或@color/）

import android.app.Application;
import com.google.android.material.color.DynamicColors;
 
public class MyApplication extends Application {
 @Override
 public void onCreate() {
   super.onCreate();
   DynamicColors.applyToActivitiesIfAvailable(this);
 }
}

       如果不需要整个应用生效

class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        DynamicColors.applyIfAvailable(this)
        ......
}

       如果想要将原色为其他部分颜色

①color.xml

<resources>   
 <color name="overlay_light_primary">#9C4146</color>  
 <color name="overlay_light_onPrimary">#FFFFFF</color>  
 <color name= "overlay_light_primaryContainer">#FFDADB</color>   
 <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

②style.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">   
 <item name="colorPrimary">@color/overlay_light_primary</item>   
 <item name="colorOnPrimary">@color/overlay_light_onPrimary</item>  
 <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>     
 <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

③更换API

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

       若果应用中控件的颜色还是无法跟随系统改变颜色，还可以使用以下方法

style.xml中，将颜色取值改为@android:color/system_accent1_100

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">   
 <item name="colorPrimary">@android:color/system_accent1_100</item>   
 <item name="colorOnPrimary">@android:color/system_accent1_100</item>  
 <item name="colorPrimaryContainer">@android:color/system_accent1_100</item>     
 <item name="colorOnPrimaryContainer">@android:color/system_accent1_100<item>
</style>

具体的色值选取，可以参考

<!-- Lightest shade of the accent color used by the system. White.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_0">#ffffff</color>
    <!-- Shade of the accent system color at 99% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_10">#F1FFFC</color>
    <!-- Shade of the accent system color at 95% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_50">#9CFFF2</color>
    <!-- Shade of the accent system color at 90% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_100">#8DF5E3</color>
    <!-- Shade of the accent system color at 80% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_200">#71D8C7</color>
    <!-- Shade of the accent system color at 70% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_300">#53BCAC</color>
    <!-- Shade of the accent system color at 60% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_400">#34A192</color>
    <!-- Shade of the accent system color at 49% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_500">#008375</color>
    <!-- Shade of the accent system color at 40% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_600">#006C5F</color>
    <!-- Shade of the accent system color at 30% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_700">#005747</color>
    <!-- Shade of the accent system color at 20% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_800">#003E31</color>
    <!-- Shade of the accent system color at 10% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_900">#002214</color>
    <!-- Darkest shade of the accent color used by the system. Black.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent1_1000">#000000</color>
 
    <!-- Lightest shade of the secondary accent color used by the system. White.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_0">#ffffff</color>
    <!-- Shade of the secondary accent system color at 99% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_10">#F0FFFC</color>
    <!-- Shade of the secondary accent system color at 95% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_50">#CDFAF1</color>
    <!-- Shade of the secondary accent system color at 90% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_100">#BFEBE3</color>
    <!-- Shade of the secondary accent system color at 80% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_200">#A4CFC7</color>
    <!-- Shade of the secondary accent system color at 70% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_300">#89B4AC</color>
    <!-- Shade of the secondary accent system color at 60% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_400">#6F9991</color>
    <!-- Shade of the secondary accent system color at 49% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_500">#537C75</color>
    <!-- Shade of the secondary accent system color at 40% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_600">#3D665F</color>
    <!-- Shade of the secondary accent system color at 30% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_700">#254E47</color>
    <!-- Shade of the secondary accent system color at 20% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_800">#0C3731</color>
    <!-- Shade of the secondary accent system color at 10% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_900">#00211C</color>
    <!-- Darkest shade of the secondary accent color used by the system. Black.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent2_1000">#000000</color>
 
    <!-- Lightest shade of the tertiary accent color used by the system. White.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_0">#ffffff</color>
    <!-- Shade of the tertiary accent system color at 99% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_10">#FFFBFF</color>
    <!-- Shade of the tertiary accent system color at 95% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_50">#F9EAFF</color>
    <!-- Shade of the tertiary accent system color at 90% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_100">#ECDBFF</color>
    <!-- Shade of the tertiary accent system color at 80% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_200">#CFBFEB</color>
    <!-- Shade of the tertiary accent system color at 70% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_300">#B3A4CF</color>
    <!-- Shade of the tertiary accent system color at 60% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_400">#988AB3</color>
    <!-- Shade of the tertiary accent system color at 49% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_500">#7B6E96</color>
    <!-- Shade of the tertiary accent system color at 40% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_600">#64587F</color>
    <!-- Shade of the tertiary accent system color at 30% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_700">#4C4165</color>
    <!-- Shade of the tertiary accent system color at 20% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_800">#352B4D</color>
    <!-- Shade of the tertiary accent system color at 10% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_900">#1E1636</color>
    <!-- Darkest shade of the tertiary accent color used by the system. Black.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_accent3_1000">#000000</color>
 
    <!-- Lightest shade of the neutral color used by the system. White.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_0">#ffffff</color>
    <!-- Shade of the neutral system color at 99% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_10">#fbfbfb</color>
    <!-- Shade of the neutral system color at 95% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_50">#f0f0f0</color>
    <!-- Shade of the neutral system color at 90% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_100">#e2e2e2</color>
    <!-- Shade of the neutral system color at 80% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_200">#c6c6c6</color>
    <!-- Shade of the neutral system color at 70% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_300">#ababab</color>
    <!-- Shade of the neutral system color at 60% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_400">#909090</color>
    <!-- Shade of the neutral system color at 49% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_500">#757575</color>
    <!-- Shade of the neutral system color at 40% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_600">#5e5e5e</color>
    <!-- Shade of the neutral system color at 30% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_700">#464646</color>
    <!-- Shade of the neutral system color at 20% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_800">#303030</color>
    <!-- Shade of the neutral system color at 10% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_900">#1b1b1b</color>
    <!-- Darkest shade of the neutral color used by the system. Black.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral1_1000">#000000</color>
 
    <!-- Lightest shade of the secondary neutral color used by the system. White.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_0">#ffffff</color>
    <!-- Shade of the secondary neutral system color at 99% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_10">#fbfbfb</color>
    <!-- Shade of the secondary neutral system color at 95% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_50">#f0f0f0</color>
    <!-- Shade of the secondary neutral system color at 90% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_100">#e2e2e2</color>
    <!-- Shade of the secondary neutral system color at 80% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_200">#c6c6c6</color>
    <!-- Shade of the secondary neutral system color at 70% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_300">#ababab</color>
    <!-- Shade of the secondary neutral system color at 60% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_400">#909090</color>
    <!-- Shade of the secondary neutral system color at 49% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_500">#757575</color>
    <!-- Shade of the secondary neutral system color at 40% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_600">#5e5e5e</color>
    <!-- Shade of the secondary neutral system color at 30% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_700">#464646</color>
    <!-- Shade of the secondary neutral system color at 20% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_800">#303030</color>
    <!-- Shade of the secondary neutral system color at 10% lightness.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_900">#1b1b1b</color>
    <!-- Darkest shade of the secondary neutral color used by the system. Black.
     This value can be overlaid at runtime by OverlayManager RROs. -->
    <color name="system_neutral2_1000">#000000</color>
 
    <!-- Accessibility shortcut icon background color -->
    <color name="accessibility_feature_background">#5F6368</color> <!-- Google grey 700 -->
    <color name="accessibility_magnification_background">#F50D60</color>
    <color name="accessibility_daltonizer_background">#00BCD4</color>
    <color name="accessibility_color_inversion_background">#546E7A</color>