Hast du Lust auf eine neue Spiele-App für Android? Ich nenne es „Reaktionstest“ oder einfach „Reactions“. Es geht darum, so schnell wie möglich den Button zu tippen, sobald das Wort mit der Farbe des Buttons übereinstimmt. Man kann das Spiel alleine oder zu zweit spielen. Heute fangen wir mit dem Design an.

Neues Projekt erstellen

Erstelle ein neues Projekt, am besten mit der Vorlage „Empty Activity“. Gib der App einen Namen, zum Beispiel „Reactions“. Denk dir einen Package Namen aus. Benutze Java als Sprache und API 21 (Lollipop) als Minimum SDK.

Material Design und keine ActionBar

Da unser Spiel oben keine Titelleiste haben soll, wollen wir die ActionBar entfernen, so heißt die Leiste ganz oben in den Apps. Um das zu erreichen, müssen wir das „Theme“ der App ändern. Wir wollen das Material Design Theme verwenden, das Google für die Entwicklung moderner Apps empfiehlt.

Öffne dazu links in der Projektstruktur „Gradle Scripts“ und dann die Datei build.gradle (Module: app). Achtung, es gibt zwei Dateien, die build.gradle heißen, wir brauchen die für das App-Modul.

Unten im Block „dependencies“ fügst du die folgende Zeile ein:

implementation 'com.google.android.material:material:1.2.0-alpha04'

Um die Material Designs dann herunterzuladen, klickst du oben rechts in dem gelben Streifen auf „Sync Now“.

Nun öffnen wir in der Projektstruktur unter „res“, „values“, die styles.xml. Hier können wir das Theme für die App festlegen. Um das Material Design Theme zu verwenden, änderst du den „style“-Tag wie folgt:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

Farben definieren

Als nächstes wollen wir die Farben für unser Spiel definieren. In der Projektstruktur unter „res“, „values“ öffnest du die colors.xml. Drei Farben sind bereits vorgegeben. Die kannst du ändern. Füge am besten auch gleich Farben für den Hintergrund der App, für die Schriftfarbe und für die Farbe der Buttons hinzu. Hier ein Beispiel, das ich ganz schick finde:

Du kannst Farben hexadezimal eingeben, zum Beispiel #6699ff. Und du kannst Farben wiederverwenden, indem du auf eine andere Farbe verweist, zum Beispiel @color/colorPrimary.

Layout und Hintergrund

Öffne die activity_main.xml. In dieser Datei wird das Layout definiert. Lass uns das XML selbst schreiben anstatt es mit der grafischen Oberfläche zusammenzuklicken. So lernst du coden. Klicken kann jeder. Um das XML zu sehen, musst du, je nachdem welche Android Studio Version du hast, wie bei mir oben rechts auf „Split“ klicken, oder unten den „Text“-Tab wählen.

Android Studio erzeugt standardmäßig ein ConstraintLayout. Da die Arbeit mit diesen Layouts komplexer ist als mit den einfachen LinearLayouts, werden wir das ConstraintLayout durch ein LinearLayout ersetzen. Außerdem setzen wir die Hintergrundfarbe für unsere App und einen Rand von 64dip für alle Seiten. Das sollte dann so aussehen:

Wichtig! Setze auch das Attribut android:orientation=“vertical“, damit alle Elemente untereinander angeordnet werden.

Titel und Schriftart

Als erstes wollen wir oben den Titel der App anzeigen. Dazu erstellen wir eine TextView, verweisen auf den String für den App-Namen, legen eine Schriftgröße fest (50sp zum Beispiel), positionieren die TextView horizontal zentriert (center_horizontal), nutzen die Farbe, die wir vorhin für die Texte definiert haben und sorgen dafür, dass wir nach unten einen Abstand zum nächsten Element haben (32dip zum Beispiel). Das sollte dann so aussehen:

Der Text wird in der Android-Standardschriftart „Roboto“ angezeigt. Wenn dir das gefällt, lass es so. Du kannst aber auch jede beliebige andere Schriftart verwenden. Auf der Webseite https://fonts.google.com findest du eine riesige Auswahl an Schriftarten.

Wähle auf der Webseite eine Schrift aus, die dir gefällt, und klicke auf das rot/weiße Plus. Es erscheint unten rechts ein Popup. Öffne das Popup und klicke dort oben rechts auf das Download-Icon. Es wird eine ZIP-Datei heruntergeladen. Die musst du entpacken. Sie enthält eine TTF-Datei mit deiner ausgewählten Schriftart. Kopiere die TTF-Datei (STRG+C). Geh zurück in Android Studio. Erstelle im Ordner „res“ links in der Projektstruktur einen neuen Ordner „font“ und füge dort die kopierte TTF-Datein ein (STRG+V). Wichtig! Der Name der Datei darf keine Bindestriche oder Leerzeichen enthalten. Benenne die Datei um, falls das bei dir so ist.

Um die Schriftart zu verwenden, müssen wir nochmal die styles.xml öffnen, in der wir vorhin das Material Theme angegeben haben. Dort fügen wir ein neues „item“ hinzu und verweisen auf unsere Datei mit der Schriftart.

<item name="android:fontFamily">@font/gamefont</item>

Das sollte dann so aussehen:

Wenn du jetzt zurück zum Layout gehst (activity_main.xml) und dir die Vorschau anschaust, solltest du sehen, dass der Titel der App in deiner ausgewählten Schriftart dargestellt wird.

Spielanleitung hinzufügen

Ich habe noch eine kleine TextView für die Anleitung des Spiels hinzugefügt. Wenn du das auch machen willst, schreib noch eine TextView unter den Titel. Die sollte wieder mittig platziert werden (center_horizontal). Die Schriftgröße ist etwas kleiner als der Titel (20sp). Und nach unten sollte sie wieder einen Abstand zum nächsten Element haben (32dip). Den Text definieren wir in der strings.xml Datei. Die findest du in der Projektstruktur unter „res“, „values“. Dort steht bereits der Name der App. Füge einfach noch eine Zeile mit dem Text für die Spielanleitung hinzu.

<string name="description">Tippe so schnell wie möglich auf den Button...</string>

Deine TextView für die Spielanleitung könnte dann so aussehen:

Button für 1 Spieler

Jetzt brauchen wir noch Buttons. Man soll das Spiel alleine spielen können und auch zu zweit. Außerdem brauchen wir einen Button, um später noch Einstellungen vornehmen zu können.

Jetzt kommt das Material Design zum Tragen. Wir nutzen keinen normalen Button, sondern den MaterialButton. Das XML für einen Button sieht so aus:

Was gehört da alles dazu? Wichtig ist die android:id. Die brauchen wir, um später im Code auf den Button zugreifen zu können. Wir wollen ja eine Aktion ausführen, wenn der Nutzer auf den Button tippt. Dann haben wir die Breite und Höhe des Buttons (240x80dip). Den Button wollen wir auch horizontal zentrieren (center_horizontal). Mit dem Attribut android:backgroundTint verweisen wir auf die Button-Farbe, die wir vorher in der colors.xml Datei definiert haben. Außerdem soll der Button runde Ecken haben. Hierfür nutzen wir das Attribut app:cornerRadius. Der Wert sollte der Hälfte der Höhe entsprechen, damit die Rundung perfekt aussieht. In unserem Beispiel also 40dip, weil die Höhe 80dip ist. Der Text auf dem Button ist „1 Spieler“. Am besten hinterlegst du einen neuen String dafür in der strings.xml und verweist hier darauf mit android:text=“@string/single_player“. Die Schriftgröße habe ich mit 24sp angegeben.

Und dann gibt’s ein Icon auf dem Button.

Button-Icons

Um ein gutes Icon zu finden, empfehle ich dir die Webseite https://materialdesignicons.com. Wähle dort ein passendes Icon aus, tippe es an und wähle unbedingt „Advanced Export“. In dem Popup solltest du die Größe des Icons auf 192px stellen. Mach das Icon schwarz und gib ihm einen passenden Namen. Dann klickst du auf den blauen „Icon“ Button, um das Icon herunterzuladen.

Kopiere das Icon von deinem Download-Ordner (STRG+C) und füge es in Android Studio unter „res“, „mipmap“ ein (STRG+V). Es erscheint ein Fenster zum Auswählen des konkreten Mipmap-Ordners, denn es gibt mehrere. Wähle immer das mit der höchsten Auflösung (xxxhdpi).

Im Layout-XML (activity_main) kannst du nun auf das Icon verweisen, um deinem Button ein Icon hinzuzufügen. Am besten setzt du auch das Icon-Padding auf 0dip, damit die Abstände auf dem Button wieder gut aussehen. Gib dem Button auch eine vernünftige Größe.

app:icon="@mipmap/single_player"
app:iconSize="32dip"
app:iconPadding="0dip"

Buttons für 2 Spieler und Einstellungen

Als letztes bauen wir noch die anderen beiden Buttons ein. Das einfachste ist es, den XML-Block für den Button zweimal zu kopieren und die Attribute anzupassen.

Ändere jeweils die ID, den Text auf dem Button und suche wieder passende Icons raus.

Wenn du bis hierhin gekommen bist, sollte das Layout in der Vorschau ungefähr so aussehen:

Noch ein wichtiger Hinweis: Der Titel, die Spielbeschreibung und die drei Buttons müssen sich innerhalb des LinearLayouts befinden. Das heißt, ganz am Ende deines XML muss das LinearLayout geschlossen werden.

</LinearLayout>

Klappt alles? Falls du Unterstützung brauchst, kannst du mich hier unten rechts über die Chat-Funktion anschreiben. Ich werde versuchen dir zu helfen.

Viel Erfolg und Spaß beim Coden! 🙂