Wir haben ein kleines Spiel für Android entwickelt. Schau dir Teil 1 an, um zu sehen wie das geht. Nun wollen wir unser Spiel optisch aufpeppen, für den internationalen Einsatz vorbereiten und einen Dark Mode einbauen, so dass wir am späten Abend beim Spielen unsere Augen schonen.

Upgrade auf Java 1.8

Zunächst müssen wir von Java 1.7 auf Java 1.8 upgraden, so dass wir Lamdas im Code nutzen können, das hatten wir beim letzten Mal vergessen.

Dazu öffnen wir die build.gradle (Module: app) Datei und ändern sourceCompatibility und targetCompatibility von 1.7 auf 1.8

Android Studio 4.0

Wenn du Android Studio 4.0 nutzen möchtest, musst du ein Maven-Repository einbinden, damit es funktioniert.

Öffne dazu die andere build.gradle Datei, und zwar die, die für das gesamte Projekt zuständig ist, sie heißt build.gradle (Project: [Projektname]).

Dort wird die folgende Zeile an zwei Stellen eingefügt, schau dir dazu auch die Screenshots hier an.

maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }

App Icon

Unser App-Icon sieht noch etwas langweilig aus. Das können wir aufpeppen. Dazu klickst du zunächst links in der Projektstruktur auf „app“, so dass es markiert ist. Anschließend klickst du im Menü auf „File“, dann „New“ und dann „Image Asset“.

Es öffnet sich ein Dialog, in dem du Foreground Layer (Vordergrund) und Background Layer (Hintergrund) beliebig gestalten kannst. Probier es aus und mach dein App-Icon so wie du es haben möchtest.

Toasts

Wir können die App noch weiter aufwerten, zum Beispiel durch eine Textausgabe am unteren Bildschirmrand, wenn der Nutzer verloren hat und das Spiel von vorne beginnt. Diese Textmeldungen werden in Android „Toasts“ genannt.

Du öffnest die MainActivity mit dem Java-Code und suchst die Methode „onError“. Diese Methode (Funktion) wird aufgerufen, wenn der Nutzer einen Fehler macht und das Spiel somit beendet wird. Zwei Zeilen sollten bereits drinstehen, die hatten wir im vergangenen Video implementiert. Zum einen wird die Farbe auf rot gesetzt, zum anderen setzen wir unseren Zähler zurück auf 0, damit das Spiel von vorne beginnt. Nun müssen wir eine dritte Zeile hinzufügen, um einen Toast anzuzeigen.

Der Text des Toasts ist in der strings.xml hinterlegt, die du unter res/values in der Projektstruktur findest. Dort können wir alle Texte hinterlegen, die wir in der App brauchen. Unter anderem ist hier auch der Name der App hinterlegt. Auch den kannst du ändern, wenn du möchtest.

Übersetzungen in mehrere Sprachen

Nachdem du alle Texte der App in der strings.xml hinterlegt hast, kannst du diese in andere Sprachen übersetzen. Je nachdem auf welche Systemsprache das Handy eingestellt ist, zeigt sich deine App dann entsprechend.

Um Sprachen anzulegen und Texte zu übersetzen, öffnest du die strings.xml unter res/values und tippst dann auf „Open editor“ oben rechts.

Mit der kleinen Weltkugel kannst du neue Sprachen hinzufügen und dann jeden einzelnen Text übersetzen, in dem du die Übersetzung in die neue Spalte ganz rechts der Tabelle schreibst.

Dark Mode

Der Dark Mode (Night Mode) ist derzeit voll im Trend, nicht nur bei iOS, sondern auch bei Android. Nachts sollen die Augen geschont werden, deshalb werden Hintergründe schwarz, Texte hellgrau. Das reduziert auch etwas den Energieverbrauch.

So kannst du einen Dark Mode in die App einbauen:

Zunächst müssen wir alle Farben in eine XML-Datei hinterlegen, so ähnlich wie wir das auch mit den Texten gemacht haben. Die XML-Datei dazu findest du unter res/values/colors.xml.

In deinem Layout (main_activity.xml) nutzt du die hinterlegten Farben, indem du sie mit @color verknüpfst, hier ein Beispiel:

android:background="@color/number_background"

Wenn du alle Farben hinterlegt hast, klickst du links in der Projektstruktur auf den Ordner res/values mit der rechten Maustaste und wählst „New“ und dann „Values Resource File“.

Es erscheint ein Dialog. Der Dateiname (File Name) muss colors.xml heißen. In der Liste „available qualifiers“ wählst du Night Mode. Mit dem Pfeil-Button schiebst du die Auswahl in die rechte Liste „chosen qualifiers“. Anschließend stellst du den „Night mode“ auf „Night“ um.

Es wird eine neue Datei erzeugt: colors.xml (night). Die findest du in der Projektstruktur unter res/values/colors.

Hier definierst du erneut alle Farben, und zwar so, wie sie im Dark Mode aussehen sollen.

Dann kannst du deine Farben testen. Um den Night Mode in Android zu aktivieren, genügt es den Energiesparmodus auf dem Handy einzuschalten. Ab Android 10 gibt es auch einen separaten Button für den Night Mode in den Quick Settings.

Viel Spaß beim Ausprobieren und Tüfteln!

Wenn du Fragen hast, nimm Kontakt mit uns auf, wir helfen dir gern.

Quellcode herunterladen

Wenn du möchtest, kannst du dir den kompletten Quellcode der App herunterladen. Das kann dir helfen, falls du beim Nachbauen nicht weiterkommst. Klicke dazu hier.