Es geht munter weiter mit der „Reactions“-App, unserem Spiel für Android, bei dem man so schnell wie möglich einen Button antippen muss, wenn die Farbe auf dem Button der Aufschrift auf dem Button entspricht.

Den 1-Spieler-Modus haben wir schon fertig. Heute beginnen wir mit dem 2-Spieler-Modus. Und wie immer starten wir mit dem Design.

Design-Konzept

So soll das aussehen:

Wir haben zwei Buttons, für jeden Spieler einen. Und wir haben zwei Punktestände. Eigentlich ein recht einfaches Design. Die Besonderheit hier ist, dass sich die Spieler gegenübersitzen. Der obere Button und auch die obere Punktzahl muss also um 180° gedreht werden, so dass der andere Spieler einen guten Blick darauf hat. Aber auch das ist eigentlich ganz einfach. Lass uns loslegen!

RelativeLayout nutzen

Wir erstellen eine neue Layout-Datei. Dazu klicken wir mit der rechten Maustaste auf den Ordner res/layout und wählen „New“ und dann „Layout Resource File“. Die Datei nennen wir „dual_player“.

Wichtig ist, dass wir nicht das vorgegebene ConstraintLayout verwenden, sondern mit einem RelativeLayout arbeiten. Das sieht so aus.

Volle Breite, volle Höhe, Hintergrundfarbe „@color/background“ und ein Abstand von 64dip zu allen Seiten. Das kennen wir alles schon. Falls nicht, schau dir das erste Video zu dieser Serie an, da gehe ich genauer auf das Design der App ein.

Der erste Button

Im Video beginne ich mit dem Button ganz unten. Hier im Text fange ich oben an, also mit dem Button für den Spieler 1.

Wir verwenden wieder einen MaterialButton, die ID für den Button soll „button1“ heißen, das schreiben wir so:

android:id="@+id/button1"

Die ID brauchen wir im nächsten Video, um den Button im Code ansprechen zu können.

Die Breite des Buttons soll 240dip sein, die Höhe 180dip, also recht hoch. Wir zentrieren ihn mittig und geben ihm eine Hintergrundfarbe mit „android:backgroundTint“. Die Ecken sollen abgerundet sein. Ich verwende 40dip als cornerRadius. Beachte, dass wir hier „app:cornerRadius“ schreiben müssen. Die Schriftgröße soll 40sp sein.

Und um den Button um 180° zu drehen, so dass er für den Spieler auf der gegenüberliegenden Seite gut zu sehen ist, verwenden wir das Attribut „android:rotation“ und geben die Gradzahl dazu an, also so:

android:rotation="180"

Sieht doch schon gut aus! 🙂

Punktzahl für Spieler 1

Der Spieler soll sehen, wieviele Punkte er erreicht hat. Also erstellen wir eine TextView für seinen Punktestand.

Die ID soll „score1“ sein, also der Punktestand für Spieler 1. Breite und Höhe richten sich nach dem Inhalt der TextView. Wenn die Zahl größer wird, soll die Breite automatisch größer werden. Das erreichen wir mit „wrap_content“. Die Höhe der TextView bemisst sich an der Schriftgröße. Auch hier schreiben wir „wrap_content“. Die Schriftgröße definieren wir dann mit 50sp. Die TextView soll auch zentriert werden. Die Farbe muss weiß sein, dafür hatten wir bereits in der colors.xml einen Namen festgelegt.

Um die TextView für den Punktestand unter dem Button für Spieler 1 zu positionieren, nutzen wir das Attribut „android:layout_below“ und geben die ID vom Button 1 an. So rutscht die TextView unter den Button. Das geht nur, wenn wir ein RelativeLayout verwenden. Wir positionieren die Elemente relativ zu anderen Elementen. Deswegen heißt das Layout so. Mit „layout_marginTop“ geben wir der TextView noch einen Abstand zum Button.

Wichtig: Natürlich muss auch die TextView für den Punktestand um 180° gedreht werden. Das hatte ich doch glatt im Video vergessen. Aber hier machen wir das richtig. Also denk daran diese Zeile mit einzufügen:

android:rotation=“180″

Fast fertig…

Button und Punktzahl für Spieler 2

Jetzt müssen wir das ganze nochmal machen. Kopiere dazu einfach den Button und die TextView. Ich sag dir, welche Attribute wir ändern müssen.

So muss das aussehen:

Also kopieren und darunter nochmal einfügen! Am besten in umgekehrter Reihenfolge, also diesmal zuerst die TextView für den Punktestand und darunter den Button für den Spieler 2.

Als erstes ändern wir die IDs. Die TextView für den Punktestand heißt natürlich „score2“ und der Button „button“.

Nimm die Rotationen raus, der Punktestand und der Button für den zweiten Spieler werden nicht gedreht.

Die TextView für den Punktestand soll sich über dem Button befinden, also nimm „layout_below“ raus und füge „layout_above“ hinzu:

android:layout_above="@id/button2"

Und anstatt einen Abstand noch oben zu haben, muss die TextView diesmal einen Abstand nach unten aufweisen. Also „layout_marginBottom“ anstatt „layout_marginTop“, denn die TextView ist ja diesmal über dem Button und nicht darunter.

Als letztes musst du noch dafür sorgen, dass der Button ganz unten am Bildschirmrand ist. Das erreichst du mit „layout_alignParentBottom“:

android:layout_alignParentBottom="true"

Passt alles? Wunderbar! 🙂