Erstelle dein erstes Android-Projekt (3) – Simple App entwickeln

Android Entwicklung: Grundlagen Logo
Das Projekt
In den ersten beiden Artikeln wurde dir bereits gezeigt, wie ein Projekt angelegt und ein Emulator zum Testen der Apps eingerichtet wird. Im dritten Teil der Artikel-Serie "Dein erstes Android-Projekt", zeigen wir dir nun, wie du eine simple App entwickeln kannst. Sofern du die ersten beiden Schritte noch nicht durchlaufen hast, klicke bitte auf die nachfolgenden Links: 

-> Hier gehts zum 1. Artikel "Projekt anlegen" 
-> Hier gehts zum 2. Artikel "Emulator einrichten"
Aufgabe: 
Die von uns zu entwickelnde App soll eine natürliche Zahl dahingehend testen, ob diese Zahl eine Primzahl ist.

Für die Umsetzung der Aufgabe soll zunächst ein User-Interface (UI) mit folgenden drei Steuerelementen (Views) erstellt werden: 

-> Ein Eingabefeld (EditText), zur Eingabe der natürlichen Zahl 
-> Ein Schalter (Button), über welchen der Benutzer die Primzahl-Überprüfung startet 
-> Eine Anzeige (TextView), die dem Benutzer mitteilt, ob die eingegebene Zahl eine Primzahl ist oder nicht

Danach soll der Algorithmus zur Ermittlung von Primzahlen in Java geschrieben werden.

 

Schritt 1: „activity_main“ im Design-Modus öffnen
Im ersten Schritt musst du die "activity_main.xml" öffnen. Diese findest du entweder im Projekt-Fenster auf der linken Seite über den Pfad "res/layout" oder du klickst in Android-Studio oben auf das Register "activity_main.xml". Danach öffnest du noch die Design-Ansicht des Layout-Editors, indem du unterhalb des "Component Tree" auf das Register "Design" klickst. Im Editor findest du nun das Design (links) und einen Blueprint (rechts).

Simple App entwickeln (Schritt 1)

 

Schritt 2: Vorschau-Gerät umstellen
Da du im letzten Schritt deines Projekts als virtuelle Maschine das "Pixel XL" erstellt hast, soll nun auch für den Layout-Editor dieses Gerät als Vorschau verwendet werden. Dazu klickst du oben im Layout-Editor auf "Nexus 4" und wählst in der sich öffnenden Liste das "Pixel XL" aus.

Simple App entwickeln (Schritt 2)

 

Schritt 3: Steuerelemente (Views) hinzufügen
Laut der obigen Aufgabenbeschreibung müssen insgesamt drei Steuerelemente der Benutzeroberfläche hinzugefügt werden. Da Android allerdings standardmäßig bereits ein "TextView" der Oberfläche hinzufügt, musst du nur noch das "Eingabefeld (Plain Text)" und einen "Button" hinzufügen. Dazu suchst du in der Liste mit den Steuerelementen in der Kategorie "All" zunächst nach "Plain Text" und ziehst dieses Element mit gedrückter linker Maustaste auf die App-Oberfläche rechts daneben und lässt die Maustaste los, sobald sich das Element an einer passenden Stelle (z.B. wie im Bild unten) befindet. Dann suchst du in der Liste das Element "Button" und wiederholst die gleichen Schritte.

Simple App entwickeln (Schritt 3)
Danach wählst du das Eingabefeld (EditText) in der Oberfläche oder im "Component Tree" auf der linken Seite aus und klickst im Attribute-Fenster auf der rechten Seite unten auf "View all attributes", um alle Eigenschaften einzublenden. Danach suchst du das Attribut "inputType" und klappst dieses auf, indem du auf den Pfeil links neben "inputType" klickst. In der dann geöffneten Liste suchst du wiederum nach "number" und setzt hier einen Haken. 

EditText InputType ändern
Info: Dieser Schritt ist wichtig, da später über das Eingabefeld nur Zahlen eingegeben werden sollen.

 

Schritt 4: Einen Text für den Button festlegen
Der Button soll nun einen sinnvollen Text bekommen, welchen du nicht "hardcoded" über "activity_main.xml", sondern über die "strings.xml"-Datei im Ordner "values" festlegen sollst. 

Info: Das Auslagern von Text wird gemacht, um dir später das Übersetzen in andere Sprachen zu erleichtern. So wird z.B. dein deutscher Text im Ordner "values" unter "strings.xml" abgelegt und französischer Text im Ordner "values-fr" unter "strings.xml".

Um zur "strings.xml"-Datei zu kommen, musst du im Projekt-Fenster auf der linken Seite zuerst den Ordner "res" und danach den Ordner "values" öffnen. Dort klickst du dann doppelt auf "strings.xml"  und fügst dieser Datei folgende Zeile hinzu: <string name="button_text">Berechne Primzahl</string>

Simple App entwickeln (Schritt 4)

 

Schritt 5: Den festgelegten Text dem Button zuweisen
Öffne nun wieder die "activity_main.xml" mit einem Klick auf das Register und stelle sicher, dass du dich im Text-Modus befindest, indem du ganz unten auf "Text" klickst. Danach suchst du im XML-Code nach "Button" und ändern das Attribut "android:text" indem du den bestehenden Text mit "@string/button_text" austauschst. In der Vorschau (rechts) kannst du sehen, ob die Verknüpfung zwischen Button und String geklappt hat. Falls ja, müsste auf dem Button nun der Text "Berechne Primzahl" erscheinen.

Info: Der Name "button_text" stammt aus der "strings.xml"-Datei (siehe Schritt 4).

Simple App entwickeln (Schritt 5)

 

Schritt 6: „Hello World!“-Text löschen
Öffne nun wieder die Design-Ansicht mit einem Klick unten auf "Design" und gehe anschließend im "Component Tree" auf das "TextView"-Element. Auf der rechten Seite unter "Attributes" löschst du den vorgegebenen Text des Attributs "text".

Simple App entwickeln (Schritt 6)

 

Schritt 7: Den Steuerelementen IDs geben
Bei diesem Schritt klickst du im "Component Tree" auf das jeweilige Element und gibst diesem auf der rechten Seite bei "Attributes" eine ID unter "id". Bezeichne die IDs der Elemente dabei wie folgt:

-> TextView-Element soll die ID "tvAusgabe" bekommen
-> EditText-Element soll die ID "etEingabe" bekommen
-> Button-Element soll die ID "bPrimzahl" bekommen

Simple App entwickeln (Schritt 7)
Info: Eine Element-ID ist unter anderem deswegen wichtig, um später im Java-Code eine Verknüpfung zu einem Element der Benutzeroberfläche herstellen zu können.

 

Schritt 8: Objekte anlegen
Für jedes Steuerelement der Benutzeroberfläche benötigen wir ein eigenes Objekt, da jedes dieser Elemente aus einer anderen Klasse stammt. Du öffnest also zuerst die "MainActivity.java" mit einem Klick auf das Register oben oder über den Pfad "java/oberster_Unterordner/MainActivity" und definierst direkt unterhalb des Klassennamens "MainActivity" folgende drei Objekte:

-> EditText etEingabe;
-> Button bPrimzahl;
-> TextView tvAusgabe;

Dabei steht zuerst die Steuerelementklasse bzw. der Datentyp (EditText, Button, TextView) und dann der Name des Objektes. Hierbei wählst du idealerweise die gleichen Namen, die du bereits bei den IDs der Steuerelemente verwendet hast. Du kannst aber natürlich auch andere Namen wählen! Wenn du erstmalig die oben erwähnten Objekte anlegst, werden diese zunächst rot markiert und ein Fehler ausgegeben. Um dieses Problem zu lösen, drückst du gleichzeitig "Alt" und "Enter". Dabei werden die notwendigen Import-Anweisungen umgesetzt und die Klassen richtig erkannt.

Simple App entwickeln (Schritt 8)

 

Schritt 9: Verknüpfung zwischen Objekten und Views herstellen
Nachdem alle Elemente der Oberfläche und die dazu passenden Objekte angelegt wurden, müssen nun die Verknüpfungen zwischen diesen Parteien hergestellt werden. Um eine solche Verknüpfung zu erreichen, muss die Methode "findViewById()" der aktiven Instanz der Klasse "MainActivity" eingesetzt werden. Dieser Methode wird als Parameter die ID des Steuerelements übergeben, wobei hier die automatisch erzeugte Klasse "R" und die darin befindliche Klasse "id" verwendet werden müssen. Der Rückgabewert von "findViewById()" ist eine Referenz zu einem Objekt der "View"-Klasse. Um nun diesen Rückgabewert dem "Objekt der Steuerelementklasse" zuweisen zu können, wird eine explizite Typkonvertierung durchgeführt, indem vor der Methode "findViewById()" eine "View-Unterklasse" vorangestellt wird. Das Ergebnis sieht dann wie folgt aus und muss in die "onCreate()"-Methode unterhalb von "setContentView" geschrieben werden:
 
-> etEingabe = (EditText) findViewById(R.id.etEingabe);
-> bPrimzahl = (Button) findViewById(R.id.bPrimzahl);
-> tvAusgabe = (TextView) findViewById(R.id.tvAusgabe);

Simple App entwickeln (Schritt 9)

 

Schritt 10: Interface „onClickListener“ implementieren
Um auf ein Klick-Event durch den User reagieren zu können, benötigen wir in Android das "onClickListener"-Interface. Zudem muss der betroffene Button über die Methode "setOnClickListener()" bei diesem Interface registriert werden, um später über ein Klick-Event benachrichtigt werden zu können. Im Detail sieht der Code wie folgt aus, wobei der in pink gefärbte Teil in der "MainActivity" hinzugefügt werden muss:

Interface implementieren:
-> public class MainActivity extends AppCompatActivity implements View.OnClickListener

Info: Hier wieder "Alt" und "Enter" gleichzeitig drücken, um den Import für "View" zu machen.

Button registrieren:
-> bPrimzahl.setOnClickListener(this);

Simple App entwickeln (Schritt 10)

 

Schritt 11: Event-Handler „onClick“ implementieren (1)
Nachdem das Interface in Schritt 10 implementiert wurde, poppt eine kleine, rote Glühbirne links über "public" auf. Dort musst du draufklicken, um ein kleines Drop-Down-Menü mit verschiedenen Einträgen zu öffnen. Hier wählst du den ersten Punk "Implement methods" aus.

Simple App entwickeln (Schritt 11)

 

Schritt 12: Event-Handler „onClick“ implementieren (2)
Nachdem du "Implement methods" gewählt hast, wirst du im nächsten Schritt (neues Fenster) gefragt, welche Methode du implementieren möchtest. Hier nimmst du gleich den ersten Eintrag ganz oben und klickst auf "onClick(v:View)".

Simple App entwickeln (Schritt 12)

 

Schritt 13: Algorithmus für die Primzahl-Überprüfung implementieren
Innerhalb der "onClick"-Methode soll nun der Algorithmus zur Ermittlung einer Primzahl implementiert werden. Dazu gehst du wie folgt vor:

a) Lege eine Integer-Variable "i_zahl" an und speichere darin den ins Eingabefeld eingegebenen und nach Integer konvertierten Text. 

b) Lege eine weitere Integer-Variable "i" und eine Boolean-Variable "wert" an. Setze "i" auf den Initialwert "2" und "wert" auf "true".

c) Schreibe eine "while-Schleife", die solange laufen soll, bis "i = i_zahl" ist. Innerhalb der while-Schleife wird bei jedem Schritt geprüft, ob ein Rest verbleibt, wenn "i_zahl" durch "i" geteilt wird. Falls kein Rest verbleibt, setze "wert" auf falsch. Zudem zähle innerhalb der while-Schleife "i" mit jedem Schritt um 1 hoch.

d) Nach der while-Schleife überprüfe, ob die Variable "wert" wahr ist oder nicht. Falls die Variable wahr ist, ist die vom Benutzer eingegebene Zahl eine Primzahl, ansonsten nicht.

Simple App entwickeln (Schritt 13)

 

Schritt 14: Emulator starten
Nachdem du alles implementiert hast, kannst du nun den Emulator zum Testen der App starten. Dazu klickst du im AVD-Manager auf das "Run"-Symbol.

Simple App entwickeln (Schritt 14)

 

Schritt 15: Virtuelle Maschine auswählen
Im anschließenden "Select Deployment Target"-Fenster wählst du unter "Connected Devices" dein Zielgerät zum Testen aus und klickst unten auf "OK". Nachdem der Emulator gestartet wurde, kannst du oben auf das "Run"-Symbol neben "app" klicken, um deine App auf das Zielgerät zu transportieren, zu installieren und auszuführen.

Simple App entwickeln (Schritt 15)

 

Schritt 16: App testen
Um deine App nun zu testen, musst du eine beliebige, natürliche Zahl eingeben und auf den Button "Berechne Primzahl" klicken. Unterhalb des Buttons wird dir dann angezeigt, ob die von dir eingegebene Zahl eine Primzahl ist oder nicht.

-> Hier sind beispielhaft die ersten zehn Primzahlen: 2, 3, 5, 7, 11, 13, 17, 19, 23, 29

Simple App entwickeln (Schritt 16)

 

-> Hier gehts weiter zum 1. Teil „Projekt anlegen“ 

-> Hier gehts weiter zum 2. Teil „Emulator einrichten“

 

 

 

 

 

 

 

 

 

 

 
Datenschutz
, Besitzer: (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
, Besitzer: (Firmensitz: Deutschland), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.