Dunkles Design implementieren

Jetpack Compose
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Designs in Compose
Farbschema – Material Design 3 →

Abbildung 1 Dunkles Design

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

  • Der Energieverbrauch wird je nach Bildschirmtechnologie des Geräts erheblich reduziert.
  • Die Sichtbarkeit wird für Nutzer mit eingeschränktem Sehvermögen und für Nutzer, die empfindlich auf helles Licht reagieren, verbessert.
  • Die Verwendung eines Geräts in einer Umgebung mit wenig Licht wird erleichtert.

Das dunkle Design wird auf die Android-Systembenutzeroberfläche und auf Apps angewendet, 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. Gehen Sie dazu zu Einstellungen > Display > Design und aktivieren Sie das dunkle Design.
  • Wenn die Schnelleinstellungen-Kachel aktiviert ist, können Sie die Designs über die Benachrichtigungsleiste wechseln.
  • Auf Pixel-Geräten können 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 mit einer WebView Komponente finden Sie unter Webinhalte in WebView abdunkeln.

Dunkles Design in Ihrer App unterstützen

Wenn Sie das dunkle Design unterstützen möchten, legen Sie das Design Ihrer App – in der Regel in res/values/styles.xml – so fest, dass es von einem DayNight-Design abgeleitet wird:

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

Sie können auch das dunkle Design der Material Components verwenden:

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

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

Designs und Stile

Verwenden Sie keine fest codierten Farben oder Symbole, die für die Verwendung mit einem hellen Design vorgesehen sind. Verwenden Sie stattdessen Designattribute oder Ressourcen, die für den Nachtmodus geeignet sind.

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

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

Wir empfehlen die Verwendung von Material Design Komponenten, da das Farbsystem, z. B. die Designattribute ?attr/colorSurface und ?attr/colorOnSurface, einen einfachen Zugriff auf geeignete Farben bietet. Sie können diese Attribute in Ihrem Design anpassen.

Designs in der App ändern

Sie können Nutzern die Möglichkeit geben, das Design der App zu ändern, während die App ausgeführt wird. Folgende Optionen werden empfohlen:

  • Licht
  • Dunkel
  • Systemstandardeinstellung (die empfohlene Standardoption)

Diese Optionen werden direkt den AppCompat.DayNight-Modi zugeordnet:

So wechseln Sie das Design:

Funktion „Dunkles Design erzwingen“

Android 10 bietet die Funktion Dunkles Design erzwingen. Damit können Entwickler schnell ein dunkles Design implementieren, ohne explizit ein DayNight Design festlegen zu müssen.

Mit „Dunkles Design erzwingen“ wird jede Ansicht Ihrer App mit hellem Design analysiert und automatisch ein dunkles Design angewendet, bevor sie auf dem Bildschirm gezeichnet wird. Sie können eine Kombination aus der Funktion „Dunkles Design erzwingen“ und nativer Implementierung verwenden, um die Zeit zu verkürzen, die für die Implementierung des dunklen Designs erforderlich ist.

Apps müssen sich für die Funktion „Dunkles Design erzwingen“ anmelden, indem sie android:forceDarkAllowed="true" in das Design der Activity festlegen. Dieses Attribut ist für alle von System und AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. Wenn Sie die Funktion „Dunkles Design erzwingen“ verwenden, testen Sie Ihre App gründlich und schließen Sie bei Bedarf Ansichten aus.

Wenn Ihre App ein dunkles Design verwendet, z. B. Theme.Material), wird die Funktion „Dunkles Design erzwingen“ nicht angewendet. Ebenso wird „Dunkles Design erzwingen“ nicht angewendet, wenn das Design Ihrer App von einem DayNight-Design abgeleitet wird, da das Design automatisch gewechselt wird.

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

Die Funktion „Dunkles Design erzwingen“ kann für bestimmte Ansichten mit dem android:forceDarkAllowed Layoutattribut oder mit setForceDarkAllowed() gesteuert werden.

Webinhalt

Informationen zur Verwendung dunkler Designs in webbasierten Inhalten finden Sie unter Webinhalte in WebView abdunkeln. Ein Beispiel für ein dunkles Design das auf eine WebView angewendet wird, finden Sie 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 UI-Oberflächen, die auf dem Gerät angezeigt werden, aber nicht direkt von Ihnen gesteuert werden, müssen alle verwendeten Ansichten das Design der Host-App widerspiegeln. Zwei Beispiele sind Benachrichtigungen und Launcher-Widgets.

Benachrichtigungen

Verwenden Sie die vom System bereitgestellten Benachrichtigungsvorlagen, z. B. MessagingStyle. Das System ist dann für die Anwendung des richtigen Ansichtsstils verantwortlich.

Widgets und benutzerdefinierte Benachrichtigungsansichten

Testen Sie bei Launcher-Widgets oder wenn Ihre App benutzerdefinierte Benachrichtigungsinhaltsansichten verwendet, den Inhalt sowohl mit dem hellen als auch mit dem dunklen Design.

Häufige Fehler sind:

  • Annehmen, dass die Hintergrundfarbe immer hell ist.
  • Fest codierte Textfarben.
  • Festlegen einer fest codierten Hintergrundfarbe bei Verwendung der Standardtextfarbe.
  • Verwenden eines Drawable-Symbols mit einer statischen Farbe.

Verwenden Sie in all diesen Fällen geeignete Designattribute anstelle von fest codierten 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 fest codierten Farben, z. B. Hintergrundfarben, die programmatisch auf Weiß festgelegt wurden. Verwenden Sie stattdessen das Designattribut ?android:attr/colorBackground.

Konfigurationsänderungen

Wenn sich das Design der App ändert, entweder über die Systemeinstellung oder 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. Beispielsweise möchten Sie eine Konfigurationsänderung möglicherweise 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 ein Activity deklariert, dass es Konfigurationsänderungen verarbeitet, wird seine onConfigurationChanged() Methode aufgerufen, wenn sich das Design ändert.

So prüfen Sie, welches Design aktuell verwendet wird:

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