8 Apr, 2018

Die erste „richtige“ App – Android App Entwicklung für Anfänger #5

Hi, heute erstellen wir zusammen unsere erste „richtige“ App. Wir werden einen simplen Counter programmieren, welcher mithilfe eines Buttons hochgezählt und mit einem Reset-Button zurückgesetzt werden kann.

Projekt erstellen

Erstelle, wie in einem der letzten Teile gelernt, eine neues Android Projekt. (Link: Die erste eigene App)

Layout erstellen

Zuerst musst du die activity_main.xml mit einem Doppelklick öffnen. Nun solltest du folgendes Fenster sehen.

Dies zeigt dir den Layouteditor von Androidstudio, welchen du schon kennengelernt hast. In diesem kannst du nun aus dem Fenster „Palette“ Elemente per Drag and Drop in das Layout ziehen.

Du siehst in der Mitte des Layouts ein Textelement mit den Worten „Hello World!“. Um die verfügbaren Einstellungen für dieses Element aufzurufen, klicke dies mit einem Linksklick an.

Nun erscheint am linken Rand des Layouteditors ein Fenster, mit allen möglichen Einstellungen.

In diesen Einstellungen musst du nun folgende Werte ändern:

  1. ID: „textViewCounter“
  2. text: „0“
  3. textApperance: „Compat.Display4“
  • Die ID ist dafür dar, dass du dieses Layout Element später wiederfinden und mit diesem interagieren kannst.
  • Das text Attribut gibt in diesem Fall ganz einfach den Text, welcher vom TextView angezeigt wird, an.
  • Die textAppearance gibt an, wie der Text aussehen soll. In diesem Beispiel verwenden wir einfache eine Vorlage, welche uns von Android zur Verfügung gestellt wird.

Nun musst du zwei weitere Button, welche du am linken Rand findest, hinzufügen. Weiße diesen die folgenden Werte, welche du auf den Screenshots findest, hinzu.

Nachdem du dies getan hast, kannst du zur Sicherheit deinen Layoutcode, welcher in der Sprache XML für dich erstellt worden ist, vergleichen und gegebenenfalls mit dem Folgenden ergänzen. Öffne dazu durch einen Klick auf den „Text“ Tab, welcher sich am unteren Rand des Layouteditors neben „Design“ befindet, den Textbasierten Layouteditor.

Nun hast du erfolgreich das Layout erstellt und kannst mit dem Javacode, also der Logik deiner ersten „richtigen“ App, fortfahren.

Der Javacode, die Logik der App

Nun kommst du zur eigentlichen Logik deiner App, welche dafür sorgt, dass bei einem Klick auf einer der beiden Button eine Aktion ausgelöst wird. Um diesen Code zu bearbeiten, öffne mit einem Klick auf „MainActivity.java“ deine MainActivity. Android besitzt sogenannte Activities, welche für eine Art Seite in Android stehen. Eine App besteht meist aus mehreren dieser Activities, welche miteinander „verbunden sind“ und sich gegenseitig aufrufen. Man kann aber auch, wie in diesem einfachen Beispiel, nur eine Activity benutzen. Diese Activity ist bei diesem Projekt die MainActivity, welche als Startactivity festgelegt ist. Das heißt, dass sie beim Start deiner App als Erstes erscheint. In dieser Activtiy weist man das passende Layout zu und schreibt, mithilfe von Javacode, die eigentliche Logik der App.

Zuerst musst du drei Variablen erstellen, welche später einen Verweis auf unsere Layoutelemente bieten. Füge dazu, wie im nachfolgenden Bild gezeigt, zwischen der Klassendeklaration und der onCreate Methode, diesen Code ein:

Nachdem du die Variablen hinzugefügt hast, musst du diesen noch einen Verweis auf die eigentlichen Elemente in deinem Layout machen. In Android nutzt man hierfür den Befehl „findViewById()“. In den eckigen Klammern musst du dann für jedes Element die ID, welche du im Layoutteil angegeben hast, hineinschreiben. Dies machst du mit „R.id.vorher festgelegte id“.

Als Nächstes musst du zwei Methoden anlegen, welche für das Zurücksetzen und das Hochzählen verantwortlich sind:

Bei dieser Methode greifst du auf das TextView zu und weist ihm mit der Methode „.setText()“ in den Klammern den Wert „0“ zu. Die Methode erwartet eine Zeichenkette, welche in Java String heißt. Daher muss die 0 in Anführungszeichen stehen, um Java zu zeigen, dass es sich hierbei um eben einen solchen String handelt.

In der nächsten Methode holst du dir mit dem Befehl „.getText().toString()“ die Zeichenkette, welche sich im Textfeld befindet und wandelst sie in einen int, also eine Zahl um. Diese Umwandlung machst du mit dem Befehl „Integer.valueOf()“. Diesen umgewandelten Wert speicherst du nun in der Variabe „count“ vom Typ int, welche für „normale“ Zahlen steht.

Nun hast du die Logik für das Zurücksetzen und das Hochzählen erstellt. Diese Logik musst du aber nun auch noch den beiden Button zuweisen, dass diese bei einem Klick auch ausgeführt wird.

Nachdem du diese hinzugefügt hast, ist deine App auch schon fertig und du kannst diese zum Test auf einem Emulator starten.

App mit Emulator testen

Um die App auf dem Emulator zu starten, klicke, wie bereits in einem der vorherigen Teile, auf den grünen Playbutton in der Toolleiste.

Nun wirst du nach dem Emulator gefragt. Wähle hier den bereits erstellten aus und fahre mit „OK“ fort.

Im Emulator kannst du nun deine App testen und ausprobieren, ob Alles funktioniert.

Wie geht es nun weiter?

Nachdem du in diesem Teil deine erste „richtige“ App entwickelt hast, werden wir uns beim nächsten Mal auf das Layout konzentrieren. Ich werde dir die wichtigen Layouts und Layout-Komponenten vorstellen und erklären. Mit diesem Wissen kannst du dann deine eigenen Layouts erstellen.

Hier geht’s weiter: die wichtigsten Android Layout-Elemente

Das könnte dich auch interessieren...