Dunkles Design implementieren

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen
Farbschema – Material Design 3 →

Abbildung 1. Dunkles Design

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

  • Der Stromverbrauch 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.
  • 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:

  • Rufen Sie in den Systemeinstellungen Einstellungen > Display > Design auf, um das dunkle Design zu aktivieren.
  • Wenn diese Kachel aktiviert ist, kannst du in der Benachrichtigungsleiste das Design wechseln.
  • Auf Pixel-Geräten müssen Sie den Energiesparmodus aktivieren, um gleichzeitig das dunkle Design zu aktivieren. Andere Geräte unterstützen dieses Verhalten möglicherweise nicht.

Eine Anleitung zum Anwenden eines dunklen Designs auf webbasierte Inhalte mithilfe einer WebView-Komponente finden Sie unter Darken-Webinhalte in WebView.

Dunkles Design in deiner App unterstützen

Wenn du das dunkle Design unterstützen möchtest, lege fest, dass das Design deiner App – in der Regel in res/values/styles.xml – von einem DayNight-Design übernommen werden soll:

<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 Hauptthema der App mit den vom System gesteuerten Nachtmodus-Flags verknüpft und der App wird ein dunkles Standarddesign zugewiesen, wenn es aktiviert ist.

Designs und Stile

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

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

  • ?android:attr/textColorPrimary: eine allgemeine Textfarbe. Sie ist im hellen Design fast schwarz und in dunklen Designs beinahe weiß. Es enthält einen deaktivierten Status.
  • ?attr/colorControlNormal: eine allgemeine Symbolfarbe. Es enthält einen deaktivierten Status.

Wir empfehlen die Verwendung von Material Design-Komponenten, da das Farbdesign, wie die Designattribute ?attr/colorSurface und ?attr/colorOnSurface, einfachen Zugriff auf geeignete Farben bietet. 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. Wir empfehlen die folgenden 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 Dunkles Design erzwingen, eine Funktion, mit der Entwickler schnell ein dunkles Design implementieren können, ohne explizit ein DayNight-Design festlegen zu müssen.

„Force Dark“ analysiert jede Ansicht der hellen App und wendet automatisch ein dunkles Design an, bevor es auf dem Bildschirm dargestellt wird. Du kannst eine Mischung aus „Force Dark“ und der nativen Implementierung verwenden, um den Zeitaufwand für die Implementierung des dunklen Designs zu reduzieren.

Für Apps muss die Option „Dunkler Modus erzwingen“ aktiviert werden, indem im Design der Aktivität android:forceDarkAllowed="true" festgelegt wird. Dieses Attribut wird für alle vom System und von AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. Teste deine App bei Verwendung von „Force Dark“ gründlich und schließe Ansichten nach Bedarf aus.

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

„Dunkles Design erzwingen“ für eine Ansicht deaktivieren

„Dunkelgrau erzwingen“ kann in bestimmten Ansichten mit dem Layoutattribut android:forceDarkAllowed oder mit setForceDarkAllowed() gesteuert werden.

Webinhalt

Informationen zur Verwendung von dunklen Designs in webbasierten Inhalten finden Sie unter Darken-Webinhalte in WebView. Ein Beispiel für das dunkle Design, das auf ein WebView angewendet wird, findest du in der WebView-Demo auf GitHub.

Best Practices

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

Benachrichtigungen und Widgets

Achte bei UI-Oberflächen, die auf dem Gerät angezeigt, aber nicht direkt gesteuert werden, darauf, dass alle verwendeten Ansichten dem Design der Host-App entsprechen. Zwei Beispiele sind Benachrichtigungen und Launcher-Widgets.

Benachrichtigungen

Verwenden Sie 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 den Inhalt bei Launcher-Widgets oder wenn deine App benutzerdefinierte Ansichten für Benachrichtigungsinhalte verwendet, sowohl im hellen als auch im dunklen Design.

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 allen diesen Fällen geeignete Designattribute anstelle von hartcodierten Farben.

Startbildschirme

Wenn Ihre App einen benutzerdefinierten Startbildschirm hat, müssen Sie ihn 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 Anwendung ändert, entweder über die Systemeinstellung oder über AppCompat, wird eine Änderung der uiMode-Konfiguration ausgelöst. Aktivitäten werden also automatisch neu erstellt.

In einigen Fällen möchten Sie vielleicht, dass eine App die Konfigurationsänderung verarbeitet. Beispielsweise können Sie eine Konfigurationsänderung verzögern, weil ein Video wiedergegeben wird.

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

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

Wenn eine Activity deklariert, dass sie Konfigurationsänderungen verarbeitet, wird bei einer Designänderung ihre Methode onConfigurationChanged() 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;
}