Dunkles Design implementieren

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen
<ph type="x-smartling-placeholder"></ph> Farbschema – Material Design 3 →

<ph type="x-smartling-placeholder">
</ph>
Abbildung 1: Dunkles Design

Das dunkle Design ist ab Android 10 (API-Level 29) verfügbar. Es hat die die folgenden Vorteile:

  • Verringert den Stromverbrauch erheblich, je nachdem, Bildschirmtechnologie.
  • Verbessert die Sichtbarkeit für Nutzer mit eingeschränktem Sehvermögen und solche, die empfindlich auf helles Licht.
  • Erleichtert die Nutzung eines Geräts bei schlechten Lichtverhältnissen.

Das dunkle Design gilt für die Android-Systembenutzeroberfläche und für Apps, die auf dem Gerät ausgeführt werden.

Es gibt drei Möglichkeiten, das dunkle Design in Android 10 und höher zu aktivieren:

  • Verwenden Sie die Systemeinstellung, indem Sie zu Einstellungen > Anzeigen > Design für dunkles Design aktivieren.
  • Auf der Kachel „Schnelleinstellungen“ können Sie das Design in der Benachrichtigungsleiste ändern, wenn diese Option aktiviert ist.
  • Auf Pixel-Geräten müssen Sie den Energiesparmodus aktivieren. . Andere Geräte unterstützen dieses Verhalten möglicherweise nicht.

Anleitungen zum Anwenden eines dunklen Designs auf webbasierte Inhalte mithilfe von WebView -Komponente, siehe Webinhalte in WebView dunkler machen.

Dunkles Design in deiner App unterstützen

Zur Unterstützung des dunklen Designs musst du das Design deiner App festlegen. Du findest es in der Regel unter res/values/styles.xml: zum Übernehmen von Daten aus einem DayNight-Design:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Sie können auch das Tag Material Components (dunkel) Design:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Dadurch wird das Hauptthema der App mit den vom System gesteuerten Nachtmodus-Flags gibt der App ein dunkles Standarddesign, wenn es aktiviert ist.

Designs und Stile

Verwenden Sie keine hartcodierten Farben oder Symbole, die für ein helles Design bestimmt sind. Verwenden Sie Themenattribute oder nachts qualifizierte Ressourcen.

Zwei Designattribute sind für das dunkle Design am wichtigsten:

  • ?android:attr/textColorPrimary: eine allgemeine Textfarbe. Es ist bei hellem Design fast schwarz und bei dunklen Designs fast weiß. Es enthält ein deaktiviert.
  • ?attr/colorControlNormal: eine allgemeine Symbolfarbe. Es enthält ein deaktiviert.

Wir empfehlen, Material Design Komponenten, da das zugehörige Farbdesign System wie das Theme die Attribute ?attr/colorSurface und ?attr/colorOnSurface Farben zu wählen. Sie können diese Attribute in Ihrem Design anpassen.

Designs in der App ändern

Sie können Nutzern erlauben, das Design der App zu ändern, während die App ausgeführt wird. Die folgenden sind empfohlene Optionen:

  • Leicht
  • Dunkel
  • Systemstandardeinstellung (empfohlene Standardoption)

Diese Optionen lassen sich direkt den AppCompat.DayNight-Modi zuordnen:

So wechseln Sie das Design:

Dunkles Design erzwingen

Android 10 bietet Force Dark, eine Funktion, mit der Entwickler schnell ein dunkles Design implementieren, ohne explizit ein DayNight-Design festlegen zu müssen.

„Force Dark“ analysiert jede Ansicht deiner hellen App und wendet ein dunkles Design an bevor es auf dem Bildschirm erscheint. Du kannst eine Mischung aus Force Dark native Implementierung, um den Zeitaufwand für die Implementierung aus.

Apps müssen die Funktion „Dunkles Design erzwingen“ aktivieren, indem du android:forceDarkAllowed="true" festlegst in Thema der Aktivität. Dieses Attribut wird auf alle System- und Von AndroidX bereitgestellte helle Designs wie Theme.Material.Light. Wenn Sie Erzwinge die dunkle Darstellung, teste deine App gründlich und schließe Aufrufe nach Bedarf aus.

Wenn deine App ein dunkles Design wie Theme.Material verwendet, ist die Funktion „Dunkles Design erzwingen“ nicht angewendet. Wenn das Design Ihrer App von einem DayNight-Design übernommen wird, Das dunkle Design wird aufgrund des automatischen Designwechsels nicht angewendet.

„Dunkles Design erzwingen“ für eine Ansicht deaktivieren

Die Funktion „Dunkles Design erzwingen“ kann in bestimmten Ansichten mit der android:forceDarkAllowed-Layoutattribut oder mit setForceDarkAllowed()

Webinhalt

Informationen zur Verwendung des dunklen Designs in webbasierten Inhalten finden Sie unter Darken Web. in WebView ansehen. Ein Beispiel für ein dunkles Design auf ein WebView angewendet wird, sehen Sie sich die WebView-Demo zu GitHub .

Best Practices

In den folgenden Abschnitten finden Sie Best Practices für die Implementierung von dunklen Designs.

Benachrichtigungen und Widgets

Aktivieren Sie für UI-Oberflächen, die auf dem Gerät angezeigt, aber nicht direkt gesteuert werden, Achten Sie darauf, dass alle verwendeten Ansichten zum Thema der Host-App passen. Zwei Beispiele sind Benachrichtigungen und Launcher-Widgets.

Benachrichtigungen

Verwenden Sie die vom System bereitgestellten Benachrichtigungsvorlagen wie MessagingStyle. Dieses bedeutet, dass das System für die Anwendung des richtigen Ansichtsstils verantwortlich ist.

Widgets und benutzerdefinierte Benachrichtigungsansichten

Bei Launcher-Widgets oder wenn für Ihre App benutzerdefinierte Ansichten von Benachrichtigungsinhalten verwendet werden, den Inhalt sowohl am hellen als auch am dunklen Design testen.

Hier einige häufige Fallstricke, auf die Sie achten sollten:

  • Vorausgesetzt, die Hintergrundfarbe ist immer hell.
  • Textfarben hartcodieren.
  • Eine hartcodierte Hintergrundfarbe bei Verwendung der Standardtextfarbe festlegen.
  • Verwendung eines Drawable-Symbols in einer statischen Farbe

Verwenden Sie in all diesen Fällen geeignete Themenattribute statt hartcodierter Farben.

Startbildschirme

Wenn Ihre App über einen benutzerdefinierten Startbildschirm verfügt, müssen Sie ihn möglicherweise so ändern, das dem ausgewählten Design entspricht.

Entfernen Sie alle hartcodierten Farben, z. B. Hintergrundfarben, die programmatisch in weiß. Verwenden Sie stattdessen das Designattribut ?android:attr/colorBackground.

Konfigurationsänderungen

Wenn sich das Design der App ändert, entweder über die Systemeinstellung oder AppCompat, wird es löst ein uiMode aus Konfigurationsänderung. Aktivitäten werden also automatisch neu erstellt.

In einigen Fällen möchten Sie vielleicht, dass eine App die Konfigurationsänderung verarbeitet. Für z. B. eine Konfigurationsänderung verzögern, gespielt wird.

Eine App kann die Implementierung des dunklen Designs übernehmen, indem sie deklariert, dass jedes Activity kann die uiMode-Konfigurationsänderung verarbeiten:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Wenn ein Activity deklariert, dass es Konfigurationsänderungen verarbeitet, onConfigurationChanged() wird bei einer Designänderung aufgerufen.

Apps können folgenden Code ausführen, um das aktuelle Design zu ermitteln:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}