Dunkles Design implementieren

Compose ausprobieren
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 hat die die folgenden Vorteile:

  • Reduziert den Stromverbrauch je nach Bildschirmtechnologie des Geräts erheblich.
  • 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:

  • Wenn Sie das dunkle Design verwenden möchten, gehen Sie zu Einstellungen > Display > Design und aktivieren Sie die entsprechende Option.
  • Wenn die Funktion aktiviert ist, können Sie über die Kachel „Schnelleinstellungen“ im Benachrichtigungs-Steuerfeld zwischen den Themen wechseln.
  • Pixel-Geräte: Aktivieren Sie den Energiesparmodus, damit das dunkle Design . 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 Ihrer App unterstützen

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

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

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

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

Dadurch wird das Hauptdesign der App an die vom System gesteuerten Flags für den Nachtmodus gebunden und die App erhält ein standardmäßiges dunkles Design, wenn der Modus 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 Ressourcen mit Nachtqualifikation.

Für das dunkle Design sind zwei Designattribute am wichtigsten:

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

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. Wir empfehlen folgende 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 festzulegen.

„Force Dark“ analysiert jede Ansicht deiner hellen App und wendet ein dunkles Design an bevor es auf dem Bildschirm erscheint. Sie können eine Mischung aus „Force Dark“ und nativer 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 sie android:forceDarkAllowed="true" im Design der Aktivität festlegen. Dieses Attribut wird für alle vom System und von AndroidX bereitgestellten hellen Designs festgelegt, z. B. Theme.Material.Light. Wenn Sie „Force Dark“ 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 „Dunkeles 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 „Force Dark“ kann für bestimmte Ansichten mit dem Layoutattribut android:forceDarkAllowed oder mit setForceDarkAllowed() gesteuert werden.

Webinhalt

Informationen zur Verwendung dunkler Designs in webbasierten Inhalten finden Sie unter Webinhalte in WebView verdunkeln. 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 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 Ansichten für benutzerdefinierte Benachrichtigungen

Testen Sie die Inhalte von Launcher-Widgets oder benutzerdefinierten Benachrichtigungsinhalten sowohl im hellen als auch im dunklen Design.

Häufige Fallstricke:

  • Vorausgesetzt, die Hintergrundfarbe ist immer hell.
  • Textfarben hartcodieren.
  • Festlegen einer hartcodierten Hintergrundfarbe bei Verwendung der Standardtextfarbe
  • Ein gezeichnetes Symbol mit einer statischen Farbe verwenden

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 auf „Weiß“ gesetzt sind. Verwenden Sie stattdessen das Attribut „?android:attr/colorBackground“ für das Design.

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, die Konfigurationsänderung von einer App auszuführen. So können Sie beispielsweise eine Konfigurationsänderung verzögern, weil gerade ein Video wiedergegeben 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 angibt, dass es Konfigurationsänderungen verarbeitet, wird seine Methode onConfigurationChanged() aufgerufen, wenn es zu einer Themenänderung kommt.

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

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