Dunkles Design implementieren

Funktion „Schreiben“ ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen

Farbschema – Material Design 3 →

Das dunkle Design ist ab Android 10 (API-Level 29) verfügbar. Sie bietet folgende Vorteile:

• Der Energieverbrauch wird je nach Bildschirmtechnologie des Geräts erheblich reduziert.
• Verbessert die Sichtbarkeit für Nutzer mit eingeschränktem Sehvermögen und solche, die empfindlich auf helles Licht reagieren.
• Ermöglicht die Nutzung des Geräts bei schlechten Lichtverhältnissen.

Das dunkle Design wird auf die System-UI von Android und auf Apps angewendet, die auf dem Gerät ausgeführt werden.

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

• Verwenden Sie die Systemeinstellung unter Einstellungen > Display > Design, um das dunkle Design zu aktivieren.
• Über die Kachel „Schnelleinstellungen“ kannst du über die Benachrichtigungsleiste zu einem anderen Design wechseln (falls aktiviert).
• Auf Pixel-Geräten muss der Energiesparmodus aktiviert werden, um gleichzeitig das dunkle Design zu aktivieren. Andere Geräte unterstützen dieses Verhalten möglicherweise nicht.

Eine Anleitung dazu, wie Sie mit einer WebView-Komponente ein dunkles Design auf webbasierte Inhalte anwenden, finden Sie unter Webinhalte in WebView abdunkeln.

Dunkles Design in Ihrer App unterstützen

Zur Unterstützung des dunklen Designs legen Sie fest, dass das Design Ihrer App – normalerweise in res/values/styles.xml – von einem DayNight-Design übernommen wird:

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

Sie können auch das dunkle Design für Materialkomponenten verwenden:

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

Dadurch wird das Hauptdesign der App mit den vom System gesteuerten Nachtmodus-Flags verknüpft und der App ein standardmäßiges dunkles Design zugewiesen, wenn sie aktiviert ist.

Designs und Stile

Verwenden Sie keine hartcodierten Farben oder Symbole für ein helles Design. Verwenden Sie stattdessen Themenattribute oder nachtqualifizierte Ressourcen.

Beim dunklen Design sind vor allem zwei Attribute wichtig:

• ?android:attr/textColorPrimary: Eine Textfarbe für allgemeine Zwecke. Im hellen Design ist es fast schwarz und im dunklen Design fast weiß. Sie enthält einen deaktivierten Status.
• ?attr/colorControlNormal: Eine Symbolfarbe für allgemeine Zwecke. Sie enthält einen deaktivierten Status.

Wir empfehlen die Verwendung von Material Design-Komponenten, da deren Farbdesignsystem, z. B. die Designattribute ?attr/colorSurface und ?attr/colorOnSurface, einfachen Zugriff auf geeignete Farben ermöglicht. 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 sie ausgeführt wird. Folgende Optionen werden empfohlen:

• Leicht
• Dunkel
• Standardeinstellung des Systems (empfohlene Standardoption)

Diese Optionen beziehen sich direkt auf AppCompat.DayNight-Modi:

• LED: MODE_NIGHT_NO.

• Dunkel: MODE_NIGHT_YES.

• Systemstandard: MODE_NIGHT_FOLLOW_SYSTEM.

So wechseln Sie das Design:

• Verwenden Sie ab API-Level 31 UiModeManager#setApplicationNightMode, um dem System mitzuteilen, welches Design Ihre App ausführt. So passt das System das Design an den Ladebildschirm an.

• Verwenden Sie auf API-Level 30 und niedriger AppCompatDelegate.setDefaultNightMode(), um das Design zu wechseln.

Funktion „Dunkles Design erzwingen“

Android 10 bietet die Funktion Dunkles Design erzwingen, mit der Entwickler schnell ein dunkles Design implementieren können, ohne explizit ein DayNight-Design festzulegen.

Die Funktion „Dunkles Design erzwingen“ analysiert jede Ansicht Ihrer hellen App und wendet automatisch ein dunkles Design an, bevor es auf dem Bildschirm angezeigt wird. Sie können eine Mischung aus „Force Dark“ und einer nativen Implementierung verwenden, um die Zeit für die Implementierung des dunklen Designs zu verkürzen.

Apps müssen die Funktion „Dunkles Design erzwingen“ aktivieren, indem du android:forceDarkAllowed="true" im Design der Aktivität festlegst. Dieses Attribut wird für alle vom System und von AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. Testen Sie Ihre App mit „Force Dark“ gründlich und schließen Sie Aufrufe nach Bedarf aus.

Wenn Ihre App ein dunkles Design wie Theme.Material verwendet, wird „Dunkles Design erzwingen“ nicht angewendet. Wenn das Design Ihrer App von einem DayNight-Design übernommen wird, wird „Dunkel erzwingen“ aufgrund des automatischen Designwechsels nicht angewendet.

Funktion „Dunkles Design erzwingen“ für eine Ansicht deaktivieren

Die Funktion „Dunkel erzwingen“ lässt sich für bestimmte Ansichten mit dem Layoutattribut android:forceDarkAllowed oder mit setForceDarkAllowed() steuern.

Webinhalt

Informationen zur Verwendung von dunklen Designs in webbasierten Inhalten findest du unter Darken Web Content in WebView. Ein Beispiel für ein dunkles Design für ein WebView findest du in der WebView-Demo auf GitHub.

Best Practices

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

Benachrichtigungen und Widgets

Bei Oberflächen, die du auf dem Gerät anzeigen, aber nicht direkt steuern kannst, achte darauf, dass alle verwendeten Ansichten das Design der Host-App widerspiegeln. Zwei Beispiele sind Benachrichtigungen und Launcher-Widgets.

Benachrichtigungen

Verwende die vom System bereitgestellten Benachrichtigungsvorlagen wie MessagingStyle. Das bedeutet, dass das System dafür verantwortlich ist, den richtigen Ansichtsstil anzuwenden.

Widgets und benutzerdefinierte Benachrichtigungsansichten

Teste bei Launcher-Widgets oder wenn deine App benutzerdefinierte Ansichten von Benachrichtigungsinhalten verwendet, den Inhalt sowohl mit dem hellen als auch dem dunklen Design.

Häufige Schwierigkeiten, auf die Sie achten sollten:

• Angenommen, die Hintergrundfarbe ist immer hell.
• Textfarben hartcodieren.
• Hartcodierte Hintergrundfarbe bei Verwendung der Standardtextfarbe festlegen
• Ein Drawable-Symbol in einer statischen Farbe verwenden

Verwenden Sie in allen Fällen geeignete Designattribute anstelle hartcodierter Farben.

Startbildschirme

Wenn Ihre App einen benutzerdefinierten Startbildschirm hat, müssen Sie diesen möglicherweise so ändern, dass er das ausgewählte Design widerspiegelt.

Entfernen Sie alle hartcodierten Farben, z. B. Hintergrundfarben, die programmatisch auf Weiß gesetzt wurden. Verwenden Sie stattdessen das Designattribut ?android:attr/colorBackground.

Konfigurationsänderungen

Wenn sich das Design der App ändert, entweder durch die Systemeinstellung oder durch AppCompat, wird eine uiMode-Konfigurationsänderung ausgelöst. Das bedeutet, dass Aktivitäten automatisch neu erstellt werden.

In einigen Fällen kann es sinnvoll sein, dass eine App die Konfigurationsänderung verarbeitet. Sie können beispielsweise eine Konfigurationsänderung verzögern, weil ein Video wiedergegeben wird.

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

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

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

Um das aktuelle Design zu prüfen, können Apps Code wie den folgenden ausführen:

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

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;
}