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:
LED:
MODE_NIGHT_NO
.Dunkel:
MODE_NIGHT_YES
.Systemstandard:
MODE_NIGHT_FOLLOW_SYSTEM
.
So wechseln Sie das Design:
Verwende auf API-Level 31 und höher
UiModeManager#setApplicationNightMode
, um dem System mitzuteilen, welches Design in deiner App ausgeführt wird. So passt das System das Design auf den Begrüßungsbildschirm an.Verwenden Sie auf API-Level 30 und niedriger
AppCompatDelegate.setDefaultNightMode()
, um das Design zu wechseln.
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; }