© Ivan Soima / 123RF.com

Eine der Spezialitäten von Kotlin sind Android-Apps. Dieser Artikel demonstriert, wie sich ein einfaches Quiz als App programmieren lässt.

Die noch junge Programmiersprache, 2017 zum ersten Mal veröffentlicht, gilt als besonders anfängerfreundlich. Die Lernkurve verläuft wesentlich flacher als etwa bei Java. Das soll die Entwicklung von Android-Apps begünstigen.

Kotlin ist eine allgemeine, statisch-typisierte Programmiersprache und steht unter einer Open-Source-Lizenz. Sie wurde ursprünglich für die JVM (Java Virtual Machine) sowie Android entwickelt. Heute benutzt man sie nicht nur in der App-Entwicklung, sondern beispielsweise auch für die Programmierung von Server-Diensten oder für Anwendungen in der Datenwissenschaft. Dabei kombiniert Kotlin funktionale und objektorientierte Eigenschaften. Im Fokus stehen dabei Interoperabilität, Sicherheit, Klarheit und Tooling. Außerdem ist Kotlin vollständig mit Java kompatibel. Das hat den großen Vorteil, dass sich alle bestehenden Bibliotheken und Frameworks für Java mitbenutzen lassen.

Dieses Tutorial vermittelt einen ersten Einstieg in Kotlin. Sie lernen Schritt für Schritt, wie Sie ein simples Quiz als Android-App programmieren. Günstig für das Verständnis sind grundlegende Kenntnisse in mindestens einer anderen Programmiersprache wie Java, C++ oder Javascript.

Ein neues Projekt

Um Android-Apps mit Kotlin zu erstellen, benötigen Sie zunächst eine IDE. Wir verwenden Android Studio, das Sie kostenlos herunterladen können. Eine mögliche Alternative ist die bekannte Java-IDE IntelliJ IDEA von JetBrains, den Schöpfern von Kotlin. Sobald Sie sich für eine IDE entschieden haben, können Sie ein neues Projekt anlegen.

Wählen Sie die Vorlage Empty Activity aus (Abbildung 1). Im nächsten Schritt geben Sie der App einen Namen, etwa LinuxQuiz. Stellen Sie sicher, dass Kotlin als Sprache eingestellt ist. Sobald das neue Projekt eingerichtet wurde, sehen Sie den Code aus Listing 1 in der bereits geöffneten Datei »MainActivity.kt«. Dieser Boilerplate-Code wird beim Starten der App zuerst ausgeführt. Er weist Android an, die Layout-Datei »activity_main.xml« anzuzeigen. Auch sie hat die IDE beim Einrichten des Projekts erzeugt und auch gleich geöffnet.

Abbildung 1: Für ein neues Projekt wählen Sie die Vorlage emptyActivity aus.

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
  }
}

Klicken Sie die Datei »activity_main.xml« an, öffnet sich ein Layout-Designer (Abbildung 2). Hier fügen Sie dem Layout neue Elemente (zum Beispiel Buttons) hinzu und verwalten bestehende Elemente. Sollten Sie nach dem Öffnen der Datei statt der GUI-Komponenten XML-Code sehen, müssen Sie zunächst auf den Reiter Design klicken, den Sie rechts in der oberen Registerleiste finden.

Abbildung 2: Der Layout-Designer ermöglicht die Konstruktion eines Layouts auf grafischem Weg oder per XML.

Eine Besonderheit bei der Entwicklung von Android-Apps ist, dass Sie auch mit XML-Dateien arbeiten müssen. Bei XML handelt es sich nicht um eine Programmier-, sondern um eine Auszeichnungssprache. Vereinfacht gesagt, enthalten XML-Dateien keine Logik für Kotlin-Apps, sondern definieren, wo Elemente zu platzieren sind. Diese Elemente fügen Sie über den visuellen Designer oder über XML-Code hinzu. Der jeweilige Kotlin-Code definiert dann, wie sich diese Elemente verhalten sollen.

Layout erstellen

Im nächsten Schritt erstellen Sie das Layout, indem Sie Elemente per Drag & Drop auf dem App-Screen platzieren oder in den XML-Code (den Sie über den Reiter Code erreichen) einfügen. In der Design-Ansicht finden sich alle vorhandenen Elemente im Reiter Palette zu finden.

Eine einfache Quiz-App benötigt vier Elemente. Der Quiz-Titel (eine »TextView«) enthält den Namen des Ratespiels, in diesem Fall “Linux Quiz”. Die Quiz-Frage (ebenfalls eine »TextView«) enthält eine vom Spieler als richtig oder falsch zu qualifizierende Behauptung. Über einen Richtig- beziehungsweise Falsch-Schalter (jeweils ein »Button«) signalisiert der Spieler, ob er die angezeigte Behauptung für richtig oder falsch hält.

Sobald Sie die benötigten Elemente auf dem App-Screen wie in Abbildung 3 platziert haben, können Sie ihre Eigenschaften über den Reiter Attributes verändern. Dort lassen sich Text, Art und Größe der Schrift sowie die Farbe anpassen, um die App zu gestalten. Mit diesem Grundgerüst haben Sie alles erzeugt und können mit der Programmierung der Elemente starten.

Abbildung 3: So sollten die grafischen Elemente des Quiz im Designer angeordnet werden.

Programmierung der App

Kotlin macht es sehr einfach, auf die platzierten Elemente zu verweisen und sie mit Funktionen auszustatten. Um ein Element im Programmcode anzusprechen, benötigen Sie die jeweilige ID. Wechseln Sie innerhalb der Datei »activity_main.xml« in die Codeansicht, sehen Sie die Repräsentation aller zuvor platzierten Elemente als XML-Code. Praktischerweise wurde jedem Element bereits eine ID zugewiesen. Ein Beispiel wäre »<Button android:id=”@+id/button”«

In diesem Beispiel hat der erste Schalter automatisch die ID »button« erhalten, mit deren Hilfe Sie auf diese Schaltfläche verweisen. Sobald der Code »button.setText(“Ihre Antwort ist richtig!”)« in der »MainActivity.kt« auftaucht, ändert sich der Button-Text beim Ausführen der App in Ihre Antwort ist richtig!. Allerdings ist das nur ein Beispiel, tatsächlich müssen Sie den Button-Text für das Quiz gar nicht ändern.

In der Quiz-App klickt der Spieler auf den Button Richtig, wenn er glaubt, dass die angezeigte Antwort stimmt. Danach soll eine Meldung auf dem Bildschirm erscheinen, die besagt, ob die gewählte Alternative die richtige war. Das bewerkstelligen Sie am besten mit einer »Toast«-Nachricht. Sie erscheint nach dem Anklicken des Schalters für ein paar Sekunden als Textblase.

Um auf einen Mausklick oder das Antippen eines Buttons zu reagieren, versehen Sie die jeweilige Button-ID mit einem »onClickListener«. Dazu wechseln Sie in die Datei »MainActivity.kt« und schreiben Ihren ersten Kotlin-Code. Um nach erfolgtem Klick eine Toast-Nachricht anzuzeigen, geben Sie den Code aus Listing 2 ein. Er kommt später innerhalb der Funktion »onCreate()« zum Einsatz. Auf Funktionen in Kotlin gehen wir später noch ein. Sobald Sie den Code eingefügt haben, können Sie die Quiz-App über den grünen Play-Button ([Strg]+[ 10]) in der oberen Leiste von Android-Studio starten.

val richtigButton = findViewById<android.widget.Button>(R.id.button)
richtigButton.setOnClickListener {
  Toast.makeText(applicationContext, "Ihre Antwort ist richtig!", Toast.LENGTH_SHORT).show()
}

Verwenden Sie die Android Studio IDE das erste Mal, müssen Sie zunächst ein virtuelles Gerät hinzufügen, damit die Android-App im Emulator starten kann (Abbildung 4). Falls beim Start kein Fehler auftritt, sehen Sie das zuvor erstellte App-Layout. Klicken Sie darin auf den Richtig-Button, erscheint im Anschluss die Toast-Nachricht Ihre Antwort ist richtig!.

Abbildung 4: Die App startet im Emulator und lässt sich dort ausprobieren.

Funktionen in Kotlin

Bis jetzt kann die Quiz-App noch recht wenig. Um ein dynamisches Quiz zu spielen, brauchen wir etwas mehr Logik, damit sich mehrere Behauptungen zur Einschätzung durch den User anzeigen lassen. Genau hier kommt der Kotlin-Code ins Spiel. Lassen Sie uns das Programm etwas besser strukturieren, indem wir die Toast-Nachrichten in eine Funktion auslagern. Dadurch lässt sich von jeder beliebigen Stelle im Code aus darauf zuzugreifen.

Um eine Funktion in Kotlin zu definieren, benutzen Sie das Schlüsselwort »fun« (für Function) und vergeben im Anschluss einen Funktionsnamen. Das Beispiel aus (Listing 3) benutzt den Funktionsnamen »toastNachricht()«. Wie in anderen Programmiersprachen auch folgt danach ein Codeblock, den geschweifte Klammern umschließen. Funktionen definieren Sie außerhalb der Hauptfunktion »onCreate()«, der Funktionscode selbst muss jedoch innerhalb der Klasse »MainActivity« bleiben. In die Funktion »toastNachricht()« lagern Sie den Code aus Listing 2 für die anzuzeigenden Nachrichten aus.

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val richtigButton = findViewById<android.widget.Button>(R.id.button)
    richtigButton.setOnClickListener {
      toastNachricht()
    }
  }
  fun toastNachricht() {
    Toast.makeText(applicationContext, "Ihre Antwort ist richtig!", Toast.LENGTH_SHORT).show()
  }
}

Führen Sie den Code erneut aus, dann sehen Sie, dass sich das Programm genauso verhält wie zuvor. Der einzige Unterschied: Der Code ist nun besser strukturiert; um eine Toast-Nachricht anzuzeigen, müssen Sie fortan nur noch die Funktion »toastNachricht()« aufrufen. Das wird schon in den nächsten Abschnitten helfen, Tipparbeit zu sparen.

Bislang reagiert die Toast-Nachricht nur auf die richtige Antwort. Sie müssen also die Logik erweitern, sodass der angezeigte Text auch bei einer falschen Antwort passt. Sie könnten das über eine weitere Funktion lösen. Die elegantere Möglichkeit ist jedoch, beide Meldungen (“Richtig” und “Falsch”) in derselben Funktion unterzubringen. Genau dafür lernen Sie im nächsten Abschnitt weitere Kotlin-Konzepte kennen.

Variablen in Kotlin

Genau wie in anderen Programmiersprachen sind Variablen in Kotlin kleine Zwischenspeicher, die Daten für den späteren Gebrauch enthalten. Im vorherigen Code wurde bereits eine Variable benutzt (erste Zeile in Listing 2). Diese Variable mit dem Namen »richtigButton« speichert den Wert »findViewById<android.widget.Button>(R.id.button)«. Der gespeicherte Wert dient dazu, die Schaltfläche mit der ID »button« zu referenzieren.

In der nächsten Zeile wird die Variable »richtigButton« mit dem zuvor gespeicherten Wert benutzt, um den »onClickListener« des Richtig-Buttons zu setzen. Gut zu wissen: Das Schlüsselwort »val« bezeichnet in Kotlin eine unveränderliche Variable (immutable), die sich nur lesen lässt. Hingegen deklarieren Sie mit dem aus vielen Programmiersprachen bekannten Schlüsselwort »var« eine veränderliche Variable (mutable), die sich nicht nur lesen, sondern auch verändert lässt.

Variablen können gespeicherte Daten auch an Funktionen weitergeben. In diesem Fall nennt man sie Argumente. Die Argumente, die eine Funktion akzeptieren soll, legen Sie innerhalb der runden Klammern fest. In »fun toastNachricht(antwort: Int) {…}« wird das Argument »antwort« mit dem Datentyp »Int« definiert, der für eine Ganzzahl steht. Haben Sie den Code derart angepasst, müssen Sie fortan eine Ganzzahl an die Funktion »toastNachricht« übergeben.

Sie können auch mehrere Argumente übergeben, die Sie aber vorab definieren müssen, wobei Sie sie durch Kommas voneinander trennen. Für die Quiz-App ordnen Sie dem Richtig-Button die Ganzzahl 1 und dem Falsch-Button die Ganzzahl 2 zu. Dadurch weiß die Funktion »toastNachricht()«, welchen Button der Benutzer angeklickt hat. Erweitern Sie nun den Code um den Falsch-Button. Achten Sie darauf, ihn über die korrekte ID (siehe »activity_main.xml«) auszuwählen (Listing 4).

val richtigButton = findViewById<android.widget.Button>(R.id.button)
richtigButton.setOnClickListener {
  toastNachricht(1)
}
val falschButton = findViewById<android.widget.Button>(R.id.button2)
falschButton.setOnClickListener {
  toastNachricht(2)
}

Im nächsten Schritt fügen Sie die Logik hinzu, die je nach der angeklickten Antwort die passende Toast-Nachricht anzeigt. Dazu verwenden Sie If-Anweisungen. Der Code nach dem If-Statement wird nur ausgeführt, wenn die jeweilige Bedingung erfüllt ist. In der Quiz-App soll die Toast-Nachricht Ihre Antwort ist richtig! nur angezeigt werden, wenn der Benutzer die korrekte Antwort anklickt. Um auch den gegenteiligen Fall einer falschen Antwort abzudecken, erweitern Sie die If-Anweisung um einen Else-Block. Das Ergebnis zeigt Listing 5.

fun toastNachricht(antwort: Int) {
  if (antwort==1) {
    Toast.makeText(applicationContext, "Ihre Antwort ist richtig!", Toast.LENGTH_SHORT).show()
  } else {
    Toast.makeText(applicationContext, "Ihre Antwort ist falsch!", Toast.LENGTH_SHORT).show()
  }
}

Mehr Fragen

Die Quiz-App nimmt langsam Gestalt an. Als Nächstes setzen Sie Ihre neuen Kotlin-Fähigkeiten ein, um daraus ein echtes Spiel zu machen. Zunächst erstellen Sie die drei zusätzlichen Variablen »frageNr«, »fragen« und »antwortRichtig«). Dabei handelt es sich um globale Variablen. Das bedeutet, dass sie außerhalb von Funktionen erstellt werden und dann für alle Funktionen zugänglich sind.

Ein Vorteil von Kotlin: Sie müssen einer Variablen keinen Datentyp zuordnen. In einer Programmiersprache wie Java dagegen muss eine Variable immer einen Datentyp haben. Wie schon angesprochen, setzen Sie das Schlüsselwort »var« vor den Variablennamen, um eine veränderbare Variable zu deklarieren. Listing 6 zeigt, welche Variablen es vor der »onCreate-Funktion« zu deklarieren gilt.

var frageNr = 0
var fragen = listOf("Frage1", "Frage2", "Frage3", "Frage4")
var antwortRichtig = listOf(1, 1, 2, 1)

Die erste Variable »frageNr« ist eine Ganzzahl, die dazu dient, die aktuelle Nummer einer Frage des Quiz abzuspeichern. Beim Quiz-Start enthält sie den Wert 0.

Bei der zweiten Variable »fragen« handelt es sich um eine Liste, die Sie in Kotlin mit dem Schlüsselwort »listOf()« erstellen. In der Quiz-App enthält die Liste mehrere Strings (Fragetexte). Die jeweils durch ein Komma getrennten Zeichenketten erhalten automatisch einen Index, auf den Sie später zugreifen können. In Kotlin hat das erste Element in einer Liste wie in vielen anderen Programmiersprachen den Index 0. Möchten Sie innerhalb der Strings einen Zeilenumbruch einfügen, benutzen Sie dazu das Zeichen »\n«. Eine Liste mit vier Fragen könnte so aussehen wie in Listing 7.

var fragen = listOf("Linus Torvalds ist der Erfinder von Linux.\n\n Richtig oder Falsch?", "Linux wird am häufigsten auf Servern eingesetzt.\n\n Richtig oder Falsch?", "Der Befehl \"mkdir\" löscht ein Verzeichnis\n\n Richtig oder Falsch?", "Mit \"cd..\" wechselt man ins übergeordnete Verzeichnis\n\n Richtig oder Falsch?")

Die dritte Variable »antwortRichtig« ist eine weitere Liste. Sie enthält Ganzzahlen mit den richtigen Antworten. Die Ganzzahl 1 steht für die Antwort “Richtig”, die Ganzzahl 2 für die Antwort “Falsch”.

Um die Fragen nach dem Klick auf einen Button weiterzuschalten, benötigen Sie eine zusätzliche Funktion, die zum Beispiel »nächsteFrage()« heißen könnte. Die Logik dieser Funktion enthält eine Änderung des Frage-»TextView« in Abhängigkeit von der Nummer der Frage (Listing 8).

fun nächsteFrage() {
  val textView = findViewById<android.widget.TextView>(R.id.textView)
  frageNr = frageNr + 1
  textView.setText(fragen.get(frageNr))
}

Diese Funktion wird nur aufgerufen, wenn der Benutzer die richtige Antwort angeklickt hat. In diesem Fall wird der Wert der Variablen »frageNr« um 1 erhöht. So ergibt sich die nächste Frage, und das Element mit der ID »textView« wird aktualisiert. Beim Verwenden der Methode ».get()« mit einer Liste muss man nur die Indexnummer in die runden Klammern einfügen. Dadurch wird die nächste Frage angezeigt, wenn sich der Wert der Variablen »frageNr« erhöht.

Der oben gezeigte Code genügt, um die Fragen weiterzuschalten. Das einzige Problem: Die App würde in diesem Zustand abstürzen, wenn der Benutzer die letzte Frage in der Liste beantwortet hat. Um das zu verhindern gilt es, die Funktion »nächsteFrage()« um ein simples Quiz-Spielende zu erweitern. Dazu kann etwa eine weitere Toast-Nachricht wie Quiz-Spielende! dienen. Für die erweiterte Logik benötigen Sie die bereits gelernten Kotlin-Konzepte.

fun nächsteFrage() {
  val textView = findViewById<android.widget.TextView>(R.id.textView)
  if (frageNr >= fragen.count() -1) {
    Toast.makeText(applicationContext, "Quiz-Spielende!", Toast.LENGTH_LONG).show()
  } else {
    frageNr = frageNr + 1
    textView.setText(fragen.get(frageNr))
  }
}

In Listing 9 prüft eine neue If-Anweisung, ob das Ende der Frageliste bereits erreicht wurde. Dazu vergleicht sie die Nummer der aktuellen Frage mit der Anzahl an Elementen in der Fragenliste. Die Anzahl der Listenelemente liefert in Kotlin die Methode ».count()«. Wurde die If-Bedingung erfüllt, zeigt das Programm die Toast-Nachricht Quiz-Spielende! an. Bis dahin wird der Else-Block ausgeführt, der die bereits zuvor eingefügte Logik zum Aktualisieren des Fragetexts enthält. Damit haben wir es fast geschafft.

Um auf die »nächsteFrage()«-Funktion sowie die angepasste Logik zu reagieren, muss der Code der Funktion »toastNachricht()« zu guter Letzt noch so angepasst werden wie in Listing 10. Im Code wurde die Bedingung der If-Anweisung so geändert, dass sie prüft, ob der Benutzer die richtige Antwort angeklickt hat. Ist das der Fall, wird die Toast-Nachricht angezeigt und im Anschluss die »nächsteFrage()«-Funktion aufgerufen.

fun toastNachricht(antwort: Int) {
  if (antwort==antwortRichtig.get(frageNr)) {
    Toast.makeText(applicationContext, "Ihre Antwort ist richtig!", Toast.LENGTH_SHORT).show()
    nächsteFrage()
  } else {
    Toast.makeText(applicationContext, "Ihre Antwort ist falsch!", Toast.LENGTH_SHORT).show()
  }
}

Verbesserungen

Führen Sie den Quellcode nun aus, wird die Quizfrage nach korrekter Beantwortung jedes Mal aktualisiert, bis das Spielende erreicht ist. Die Quiz-App ist jetzt voll funktionsfähig (Abbildung 5).

Abbildung 5: Die fertige Quiz-App in Aktion. Es bleibt noch viel Spielraum für Verbesserungen.

Selbstverständlich gibt es noch viele Ansatzpunkte für Verbesserungen. So könnte eine Anzeige des Spielstands die richtig beantworteten Fragen zählen und nach Spielende in einem neuen View präsentieren. Außerdem könnten Sie die Fragen in eine JSON-Datei oder eine simple Datenbank auslagern. Wie Sie die Quiz-App verbessern, bleibt Ihnen überlassen. Dieser Artikel hat Ihnen hoffentlich dazu einen einfachen Einstieg in die App-Programmierung mit Kotlin vermittelt. (jcb)