Wir entwickeln gemeinsam das Spiel „Reactions“ für Android. Es geht darum, so schnell wie möglich den Button zu tippen, sobald das Wort mit der Farbe des Buttons übereinstimmt. Du kannst das Spiel alleine oder zu zweit spielen.

Im ersten Teil haben wir das Layout der Startseite gebaut. Im zweiten Teil geht es jetzt darum, den 1-Spieler-Modus zu starten. Dazu zeige ich, wie man mehrere Activities in einer App haben kann und entsprechend navigiert.

Layout erstellen

Zunächst erstellen wir eine neue Layout-Datei. Dazu wählst du in der Projektstruktur links im res-Ordner den layout-Ordner aus und klickst ihn mit der rechten Maustaste an, dann auf „New“ und „Layout Resource File“.

Die Datei nennen wir single_player. Android Studio wird daraufhin eine neue XML-Datei für unser neues Layout erstellen. Stell sicher, dass du im Text-Tab oder im Split-Tab bist, damit du das XML auch siehst.

Im neuen Layout wollen wir ein RelativeLayout nutzen. Bisher kennen wir ja nur das LinearLayout. Der Unterschied ist, dass wir mit dem RelativeLayout die Elemente in Ebenen übereinander anordnen können.

Wir setzen wieder dieselbe Hintergrundfarbe wie im Layout der activity_main. Außerdem definieren wir einen Abstand zu allen Seiten von 64dip.

Als nächstes erstellen wir eine TextView für den Titel, eine weitere TextView für die Punktzahl (score) und zuletzt einen MaterialButton, den wir ganz unten platzieren, damit der Spieler ihn gut erreichen kann. Das sieht dann so aus:

Um Elemente mittig zu zentrieren, nutzen wir android:layout_centerHorizontal=“true“. Das ist beim RelativeLayout also anders als beim LinearLayout.

Damit wir die Punktzahl unter dem Titel anordnen können, geben wir zunächst der TextView für den Titel eine ID mit android:id=“@+id/title“. Die TextView für die Punktzahl erhält dann das Attribut android:layout_below=“@id/title“.

Und damit der MaterialButton ganz unten platziert wird, erhält er das Attribut android:layout_alignParentBottom=“true“. Das ist der Vorteil vom RelativeLayout. Wir können die Elemente viel freier platzieren als mit dem LinearLayout.

Neue Activity

Für jedes Seiten-Layout benötigen wir eine separate Activity. Die Activity der Hauptseite (Startseite) heißt MainActivity, das kennst du schon. Für jede weitere Unterseite erstellen wir weitere Activities. Heute brauchen wir also eine Activity für den 1-Spieler-Modus. Dazu wählst du in der Projektstruktur im Ordner java mit der rechten Maustaste den Ordner an, der so heißt wie dein Package-Name. Dort ist die MainActivity drin. Dann wählst du „New“ und „Java Class“.

Die Datei nennen wir SinglePlayerActivity.

Wie die MainActivity auch, soll die neue Klasse public sein und von der AppCompatActivity erben.

public class SinglePlayerActivity extends AppCompatActivity 

Dann erstellen bzw. überschreiben wir die onCreate-Methode, um das Layout zuzuordnen.

Manifest erweitern

Wichtig! Immer wenn wir eine neue Activity erstellt haben, müssen wir sie im so genannten AndroidManifest dem System bekannt machen. Dazu öffnen wir links in der Projektstruktur den Ordner „manifests“ und darin die AndroidManifest.xml Datei.

Hier sind grundsätzliche Einstellungen der App drin, zum Beispiel der Name, das Theme und jede einzelne Activity. Die MainActivity ist hier auch erwähnt.

Wir fügen innerhalb des application-Tags unsere neue Activity hinzu. Also kurz vor </application>.

<activity android:name=".SinglePlayerActivity" />

So weiß das System, dass es die SinglePlayerActivity gibt.

Neue Activity starten

Als letztes müssen wir noch dafür sorgen, dass unsere SinglePlayerActivity gestartet wird, wenn der Nutzer den 1-Spieler-Button auf der Startseite antippt. Dazu öffnen wir die MainActivity Java-Datei.

Damit wir mit den Buttons im Code arbeiten können, müssen wir sie zunächst ganz oben in der Klasse deklarieren.

MaterialButton singlePlayerButton;
MaterialButton dualPlayerButton;
MaterialButton settingsButton;

Im letzten Video hatten wir jedem Button eine ID im Layout gegeben. Die brauchen wir jetzt, um die Buttons im Layout zu finden und unseren deklarierten Variablen zuzuordnen. Dazu rufen wir in der onCreate-Methode eine neue Methode auf, die wir initViews nennen.

Wie du siehst, setzen wir auf dem singlePlayerButton auch gleich einen OnClickListener. Der dient dazu, die Klicks auf den Button abzufangen und eine Methode aufzurufen, sobald ein Klick erkannt wird. Diese Methode nennen wir onSinglePlayerButtonClick. Die erstellen wir direkt darunter, zunächst leer.

protected void onSinglePlayerButtonClick() {
}

In der initViews-Methode wird nun wahrscheinlich ein Fehler rot markiert sein. Und zwar der Aufruf mit dem Pfeil. Dieser Aufruf heißt übrigens „Lambda“. Dass das rot unterstrichen ist, liegt daran, dass das Projekt standardmäßig mit Java 1.7 arbeitet, aber solche Lambda-Aufrufe erst mit Java 1.8 existieren. Um dein Projekt ganz einfach auf Java 1.8 umzustellen, klickst du die rot markierte Zeile an und fährst mit der Maus drüber. Dann sollte ganz links in der Zeile eine rote Glühbirne erscheinen. Klick sie an und wähle den Lösungsvorschlag „Set language level to 8 – Lambdas, type annotations etc.“

Nach wenigen Sekunden ist das Projekt auf Java 1.8 automatisch umgestellt und der Fehler verschwindet.

Nun können wir uns um die onSinglePlayerButtonClick-Methode kümmern. Wir wollen, dass unsere neue SinglePlayerActivity gestartet wird, sobald der Nutzer auf den Button klickt. Dazu erstellen wir einen so genannten Intent. Ein Intent wird immer dann gebraucht, wenn andere Activities oder sogar andere Apps gestartet werden sollen. Auch Aktionen wie zum Beispiel Teilen von Inhalten, werden mit Intents gemacht.

Intent intent = new Intent(this, SinglePlayerActivity.class);

Wir erstellen den Intent mit dem Schlüsselwort „new“ und übergeben der Klasse den Context (this) und den Namen der Activity, die wir starten wollen. Achte darauf, an den Namen noch „.class“ anzuhängen. Wenn wir nun den Intent erstellt haben, können wir damit die Activity starten.

startActivity(intent);

Die ganze Methode sieht also so aus:

Das war’s schon! Wenn du jetzt die App startest und auf der Startseite den Button für „1 Spieler“ anklickst, sollte sich die nächste Seite öffnen mit dem neuen Layout öffnen. Hier kann der Nutzer künftig spielen. Dazu geht’s im nächsten Teil mit der Spielelogik weiter.

Der Spieler kann jederzeit ganz normal zurück navigieren und gelangt wieder zur Startseite.

Viel Spaß beim Ausprobieren! 🙂