Tutorials  /  JavaScript

Implementierung des Android DayNight-Themas: Nachtmodus leicht gemacht

Ccentron Redaktion · Juli 2024 ·5 Min. Lesezeit ·JavaScript, Tutorial

Erfahren Sie, wie Sie mit dem Android DayNight-Thema mühelos einen Nachtmodus für Ihre App integrieren. Von der Implementierung des Themas bis zur Anpassung von Ressourcen für Tag- und Nachtmodi - entdecken Sie Schritt für Schritt, wie Sie die Benutzererfahrung verbessern. Lassen Sie sich von unserem Tutorial durch die einfache Umsetzung des Nachtmodus führen und optimieren Sie Ihre App für eine angenehme Nutzung bei allen Lichtverhältnissen.

Das Android DayNight Theme

Mit dem Android DayNight Theme, das mit der Support-Bibliothek 23.2.0 eingeführt wurde, können wir zwischen den hellen und dunklen Modi unserer Anwendung umschalten. Dieses Thema verbessert die Lesbarkeit und Benutzerfreundlichkeit Ihrer Anwendung während der Nacht, indem es den weißen, blendenden Hintergrund durch einen dunkleren ersetzt. Viele Reader-Apps haben dieses Thema bereits in Ihren Apps implementiert. Lassen Sie uns mit der Umsetzung beginnen, indem wir ein neues Android Studio-Projekt mit einer leeren Aktivität erstellen.

VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Hinzufügen des Themas zu unseren styles.xml

Code
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<!-- Passen Sie Ihr Thema hier an. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

Um das DayNight-Thema in unserer Anwendung festzulegen, verwenden wir die Methode AppCompatDelegate.setDefaultNightMode(). Die folgenden Argumente sind in der oben genannten Methode erlaubt:

  • MODE_NIGHT_YES – Aktiviert den Nachtmodus manuell.
  • MODE_NIGHT_NO – Deaktiviert den Nachtmodus manuell.
  • MODE_NIGHT_FOLLOW_SYSTEM – Verwendet die Systemeinstellungen, um die Tageszeit zu bestimmen und passt den Nachtmodus entsprechend an. Dies ist das Standardargument.
  • MODE_NIGHT_AUTO – Versucht, die Uhrzeit über die Gerätestandort-APIs automatisch zu erkennen. Wenn die Laufzeitberechtigung für Standortdienste nicht gewährt ist, wird die Systemzeit verwendet.
Code
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); //Für Nachtmodus-Thema
//AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); //Für Tagesmodus-Thema

setContentView(R.layout.activity_main);
}

Das Thema sollte immer festgelegt werden, bevor die setContentView-Methode aufgerufen wird.

Was ist AppCompatDelegate?

Ein AppCompatDelegate ist eine Klasse, die einen Delegaten repräsentiert, den Sie verwenden können, um die Unterstützung von AppCompat auf beliebige Aktivitäten auszudehnen. Schauen wir uns an, wie unsere Aktivitätsansicht aussieht, wenn der Tag- und Nachtmodus nacheinander aktiviert ist. Der TextView ändert seine Farbe im Nachtmodus automatisch in Weiß. Das liegt daran, dass der TextView implizit den Standardstil mit dem Namen: ?attr/colorPrimary enthält, der die Farbe je nach hellem/dunklem App-Thema umschaltet. Wenn Sie eine benutzerdefinierte Farbe @color/red auf dem TextView setzen, ändert sie sich nicht zwischen Tag- und Nachtmodi. Die Textfarbe der Toolbar im Tagesmodus ist schwarz. Wie kann man sie in der styles.xml selbst auf weiß setzen?

Code
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<!-- Passen Sie Ihr Thema hier an. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@android:color/white</item>
</style>

Um den aktuellen Nachtmodustyp abzurufen, verwenden wir die Methode AppCompatDelegate.getDefaultNightMode(), die jeweils einen Integer für die zuvor diskutierten Typen zurückgibt. Nachdem wir eine grundlegende Vorstellung davon bekommen haben, lassen Sie uns eine Anwendung erstellen, die:

  • Ressourcen und Styles in Tag-/Nachtmodi anpassen.
  • Das DayNight-Thema aus der Benutzeroberfläche umschalten.
  • Sehen, wie verschiedene UI-Widgets im Nachtmodus aussehen.

Android Night Mode Projektstruktur

Android DayNight Theme Beispielcode

Code
// Code für activity_main.xml
  • Wir haben eine benutzerdefinierte Textfarbe und eine Drawable auf dem ImageView festgelegt.
  • Um verschiedene Farben und Drawables für Tag- und Nachtthemen festzulegen, müssen wir separate Ordner für die Ressourcen erstellen.
  • Die Ressourcen des Tagesmodus befinden sich im Standardverzeichnis.
  • Die Ressourcen des Nachtmodus befinden sich in Ordnern mit Namen, die mit -night enden.
  • Daher haben wir im Projekt die Ordner values-night und drawable-night erstellt.
  • Der Dateiname der Drawable, die Farben und die Stilnamen müssen in beiden Verzeichnissen für die Ressourcen, die Sie im DayNight-Thema umschalten möchten, gleich sein.
  • Wenn die oben genannten Dinge nur in einem der Verzeichnisse definiert sind, wird das Gleiche in Tag- und Nachtthemen verwendet.
Code
// Code für styles.xml in values-Ordner
Code
// Code für styles.xml in values-night-Ordner

Die oben definierten Stile werden verwendet, um das Standard-DayNight-Thema anzupassen. Die entsprechenden Dinge für die colors.xml sind wie folgt definiert.

Code für die MainActivity.java-Klasse
Code
// Code für MainActivity.java

In dem obigen Code verwenden wir den Schalter, um zwischen den Tag- und Nachtmodus-Themen in unserer Anwendung zu wechseln. Wir speichern den aktuellen Modus in einem SharedPreferences-Objekt. WARUM? Das Thema einer Aktivität kann nur einmal festgelegt werden. Daher müssen wir, wenn der Schalter umgeschaltet wird, den neuen Modus in einem SharedPreferences-Objekt speichern.

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren