Hintergrund
Eine neue Funktion von Google Android S: Wenn Sie das Hintergrundbild ändern, ändert sich die Farbe des gesamten Telefondesigns entsprechend dem Farbschema des Hintergrundbilds. Mit anderen Worten: Jedes Mal, wenn Sie das Hintergrundbild aktualisieren, erhält auch die Benutzeroberfläche Ihres Mobiltelefons ein völlig neues Aussehen.
Wenn ein Benutzer sein Hintergrundbild auf einem Android 12-Gerät ändert, analysiert das System das Bild, um eine Farbe auszuwählen, und wählt anhand der anfänglichen Ausgangsfarbe algorithmisch „Primär“, „Sekundär“, „Tertiär“ und „Fehler“ aus. Gleichzeitig werden Farbtheorie und Barrierefreiheitsregeln angewendet. Aus diesen Farben erstellt der Algorithmus eine Farbpalette von 0 % Helligkeit (Schwarz) bis 100 % (Weiß).
Umweltvorbereitung
1. Die minimale SDK-Einstellung für die Anwendung ist Version 31 oder höher.
2. Aktualisieren Sie die Material-Theme-Paketanwendung auf 1.5.0 oder höher „com.google.android.material:material:1.5.0“.
3. Website zur Erstellung von Material You-Themen
Fügen Sie benutzerdefinierte Farben hinzu und klicken Sie auf EXPORTIEREN, um XML zu exportieren. Es werden zwei Sätze von Themen generiert, nämlich der Tagesmodus und der Dunkelmodus (Werte, Wert-Nacht). Diese Dateien können unverändert kopiert und ersetzt werden, jedoch mit dem Namen des Themas in AndroidManifest. xml oder die Theme-Datei müssen geändert werden, damit sie zueinander passen. Der Standardname des vom Tool exportierten Themes ist 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>Korrespondenzmethode
Klassen in der Materialbibliothek DynamicColorsnutzen Aktivitätslebenszyklus-Rückrufe, um zu bestimmen, wann und wie Farbüberlagerungen angewendet werden. Mithilfe der bereitgestellten API-Aufrufe können dynamische Farben auf Aktivitäten oder die gesamte Anwendung angewendet werden. Sie können auch festlegen, wann und wo dynamische Farben angewendet werden sollen.
Um unbeabsichtigte Auswirkungen zu vermeiden, stellen Sie sicher, dass Anwendungscodekomponenten auf Materialdesigneigenschaften verweisen, d. h.
android:color="?attr/colorPrimary" anstelle der Anwendung einer fest codierten Farbe (HEX-Code oder @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);
}
}Wenn Sie nicht die gesamte Anwendung benötigen, um wirksam zu werden
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
DynamicColors.applyIfAvailable(this)
......
}Wenn Sie die Primärfarbe in die Farbe anderer Teile ändern möchten
①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 ändern
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)Wenn die Farbe der Steuerelemente in der Anwendung immer noch nicht dem System folgend geändert werden kann, können Sie auch die folgende Methode verwenden
Ändern Sie in style.xml den Farbwert in @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>Informationen zur Auswahl spezifischer Farbwerte finden Sie unter
<!-- 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>