Spiele-App BUMM Teil 1: Design

Spiele-App BUMM Teil 1: Design

Wir entwickeln ein kleines Spiel. Es heißt “BUMM”. In diesem Beitrag geht es zunächst um das Design und das Layout.

Spielprinzip

Die App zeigt in der Mitte eine Zahl. Unten sind zwei Buttons, ein “+” Button und ein “BUMM” Button.

Es wird gezählt, also 1, 2, 3, 4, 5, 6 und so weiter. Dazu drückt man den “+” Button. Mit einer Besonderheit: Immer wenn die nächste Zahl durch 3 teilbar ist oder eine 3 enthält, drückt man den “BUMM” Button. Also so: 1, 2, BUMM, 4, 5, BUMM, 7, 8, BUMM, 10, 11, BUMM, BUMM, 14, BUMM und so weiter. Drückt man den “+” Button, obwohl man BUMM drücken müsste, endet das Spiel. Das Spiel endet auch, wenn man BUMM drückt, obwohl gar kein BUMM an der Reihe war. Wie weit kommst du? Mein Rekord liegt bei 162. Danach ist mir der Kopf explodiert.

Layout

Da wir die volle Kontrolle über das Design haben wollen, verwenden wir den “Text” Tab ansttat den “Design” Tab und schreiben unser XML selbst. Zur Kontrolle kannst du natürlich jederzeit in den “Design” Tab wechseln. Dort siehst du wie dein Design voraussichtlich aussehen wird. Doch versuche wirklich mal das XML selbst zu schreiben. 

Für einfache Layouts verwenden wir LinearLayout oder RelativeLayout. Das LinearLayout ist ideal, wenn Elemente nebeneinander oder untereinander angeordnet sind. Das RelativeLayout nehmen wir, wenn Elemente wie Ebenen übereinander liegen. Für die Bumm-App, in der alles nebeneinander bzw. untereinander aufgebaut ist, ist das LinearLayout die beste Wahl.

Das äußere Layout nimmt dabei die volle Breite und die volle Höhe des Bildschirms ein. Dies erreichen wir mit dem Schlüsselwort “match-parent”. Match-parent entspricht immer der Breite bzw. Höhe des Elternelements, also des übergeordneten Elements. Für unser äußeres Layout sind das die Grenzen der App, also die volle Breite und volle Höhe des Bildschirms. Mit dem Schlüsselwort “orientation” bestimmen wir, ob die untergeordneten Elemente nebeneinander oder untereinander aufgereiht werden sollen. In unserem Fall definieren wir also orientation=”vertical”.

Außer einem Layout benötigen wir auch TextViews. Eine TextView ist ein Element, das Text darstellen kann. Dabei ist es egal, ob es sich um eine Zahl, einen Buchstaben oder eine wilde Kombination beider handelt. Sobald wir Text darstellen wollen, nutzen wir eine TextView. Auch eine TextView hat eine Breite und eine Höhe, beide müssen von uns definiert werden.

Die aktuelle Zahl im Spiel soll den größten Teil des Bildschirms einnehmen. Sie soll fast den gesamten Raum einnehmen, aber noch den Platz für die beiden Buttons am unteren Bildschirmrand lassen. Es gibt zwei Möglichkeiten das zu erreichen. Entweder wir bauen unser Layout prozentual auf, beispielsweise soll die Zahl im Spiel 80% hoch sein und die Buttons die restlichen 20% einnehmen. Oder wir bauen unser Layout so auf, dass die Buttons eine feste absolute Höhe haben und die Zahl im Spiel automatisch den Rest der Bildschirmhöhe einnimmt.

Layout Variante 1: Prozentuale Verteilung

Eine prozentuale Aufteilung erreichen wir durch die Schlüsselwörter “layout_weight” und “weightSum”. WeightSum gibt die Summe aller layout_weight an. Am besten setzt du layout_weight auf 100, sprich 100% soll die Summe sein. Das äußere Layout erhält folglich weightSum=100. Die untergeordneten Elemente werden dann prozentual aufgeteilt. So erhält die TextView für die Zahl im Spiel layout_weight=80, weil sie 80% der Höhe einnehmen soll. Und das Layout um die beiden Buttons am unteren Bildschirmrand erhält layout_weight=20, weil es 20% der Höhe einnehmen soll. Wichtig dabei ist, dass layout_height=0 ist. Das bedeutet, dass die Höhe des Elements dynamisch ist, eben abhängig vom layout_weight. Schau genau hin, layout_weight und layout_height sind unterschiedliche Schlüsselwörter.

Layout Variante 2: Feste Höhe der Buttons

Wir können alternativ die Buttons auch in ihrer Höhe fest definieren. Das erreichen wir mit layout_height=”150dip”. Die Höhe geben wir also in “dip” an. Das steht für “density independent pixels”. Das sind Pixel, die unabhängig von der Auflösung des Displays immer dieselbe Ausdehnung haben. 100 dip entsprechen in etwa 1,58 cm auf dem Display, egal ob Smartphone oder Tablet. 150 dip wären dann also ca. 2,4 cm. Die Zahl im Spiel soll die verbleibende Höhe einnehmen. Das erreichen wir wieder mit dem prozentualen Ansatz aus Variante 1. Wir setzen weightSum=100 auf das äußere Layout und geben der Zahl im Spiel die vollen 100%, also layout_weight=100. Übersetzt heißt das, dass das Layout für die Zahl die volle verbleibende Bildschirmhöhe einnehmen darf. 

Probier am besten beide Varianten aus, um es zu verstehen.

Die Buttons “+” und “Bumm” sollen nebeneinander dargestellt werden. Daher setzen wir sie in ein weiteres LinearLayout. Mit orientation=”horizontal” erreichen wir, dass die darin enthaltenen Elemente nebeneinander aufgereiht werden sollen. Die Breite dieses Layouts ist so breit wie das äußere Layout, also wieder “match-parent”. So nutzen wir wieder die volle Breite des Bildschirms. Damit beide Buttons je 50% der Breite einnehmen, geben wir dem Layout ein weightSum=100 und jedem Button ein layout_weight=50. Übersetzt bedeutet das, jede TextView hat ein Gewicht von 50, wobei die Summe 100 ist. Oder auf deutsch: 50%. Wichtig ist hierbei, dass diesmal bei den TextViews das Attribut layout_width=0 ist, da die Breite dynamisch sein muss.

Das klingt beim ersten Lesen ziemlich kompliziert. Schau dir am besten die Screenshots an und probiere es selbst in Android Studio aus. Lies dir unsere Beschreibung mehr als einmal durch. Und wenn am Ende immer noch Fragen bleiben, nimm Kontakt mit uns auf, wir helfen dir gern.

Farben

Das Design soll gut aussehen, da spielen natürlich auch Farben eine Rolle. Ich habe den “+” Button grün gehalten. Der “BUMM” Button ist bei mir rot. Die Schrift bei beiden ist weiß. Die Zahl im Spiel ist schwarz auf hellgrau. 

Farben kannst du hexadezimal angeben. Der Farbcode beginnt immer mit einem Hashtag # gefolgt von 6 Zeichen. Die ersten beiden Zeichen geben die Intensität von Rot an. Die nächsten beiden Zeichen geben die Intensität von Grün an. Die letzten beiden Zeichen geben die Intensität von Blau an. Aus diesen 6 Zeichen mischt sich die resultierende Farbe. Dabei bedeutet “hexadezimal”, dass wir immer 16 Möglichkeiten pro Zeichen haben. Alle 6 Zeichen können also jeweils die Werte von 0 bis F annehmen. 0-9 und A-F, je höher desto intensiver. Das sind 16 Möglichkeiten pro Zeichen. 16 Möglichkeiten hoch 6 Zeichen ergeben ca. 16,8 Millionen unterschiedliche Farbkombinationen. Das ist ganz ordentlich.

Diese Webseite ist hilfreich, um leicht den richtigen Farbcode für eine bestimmte Farbe zu finden: https://html-color-codes.info/webfarben_hexcodes/

Sei kreativ und gestalte die App nach deinen Wünschen!

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.