Android: Erste App (Währungsrechner) – Teil 1

Dieser Beitrag zeigt an einer sehr einfach gehaltenen App, wie man seine erste App für Android erstellen kann. Dabei werden die benötigten Elemente und Schritte detailliert beschrieben und bebildert. Das fertige Projekt kann unter dem unten stehenden Link von GitHub heruntergeladen (oder geklont) werden.

GitHub Projekt-Repository

1. Projektbeschreibung (Zielsetzung)

In diesem Beitrag wird ein einfacher Währungsrechner erstellt. Folgende Aufgaben / Voraussetzungen muss die fertige App erfüllen:

  • Eingabe eines Betrages zum Umrechnen
  • Validierung der Eingaben (nur Zahlen)
    • Auswahl der Ausgangs- und Zielwährung
  • Berechnung des Betrages in der Zielwährung
  • Ausgabe der Berechnung
    • Die letzen Ergebnisse in einer Liste ausgeben
  • Löschen der Ergebnisliste über ein Menü
  • Beenden der App über ein Menü
  • Mehrsprachigkeit

Durch diese relativ einfache Anwendung werden die unter Android am meisten benutzte Elemente vorgestellt.

2. Anlegen des Projektes unter Eclipse

Eine genaue Beschreibung, wie Sie Eclipse auf Ihrem System einrichten, finden Sie unter „Android: Eclipse installieren und einrichten„. Im Beitrag „Android: Neues Projekt anlegen“ finden Sie die Beschreibung, wie Sie ein neues Android-Projekt mithilfe des Assistenten unter Eclipse anlegen. Für das folgende Projekt sollten Sie die folgenden Werte beim Anlegen des Projektes angeben, um den Beschreibungen und Code-Ausschnitten besser folgen zu können:

  • Project name: Waehrungsrechner
  • Contents: Create new project in workspace
  • Build target: Android 2.2 (API Level 8 )
  • Application name: Waehrungsrechner
  • Package name: de.webducer.android.wrechner
  • Create Activity (angehackt): HauptActivity
  • Min SDK Version: 8

Nach der Neuanlage des Projektes wird der erste Bildschirm bereits mit einem Element, dass den Text „Hallo World“ enthält. Nun können Sie das Projekt zum ersten Mal starten. Dafür gehen Sie wie folgt vor:

  1. Markieren Sie im „Package Explorer“ das Projekt
  2. Klicken Sie mit der rechten Maustaste darauf und
  3. wählen Sie im Kontextmenü den Punkt „Run as“ -> „Android Application“

Nach einiger Zeit startet zuerst der eingerichtete Emulator (das kann abhängig vom Rechner auch einige Minuten dauern). Danach startet im Emulator das Programm. Schließen den Emulator nicht, dann wird die neue Version sehr schnell auch auf dem Emulator angezeigt.

Aber nun der Reihe nach. Zuerst erkläre ich die Datei-Struktur von unserem Projekt.

3. Ordner und Dateistruktur des Projektes

Projektstruktur
Projektstruktur
src
In diesem Verzeichnis liegen die Quellcode-Dateien zu Ihrer App (Java-Dateien). Im Moment sollte in diesem Ordner nur die Datei „HauptActivity.java“ liegen (im entsprechenden Package „de.webducer.android.wrechner“).
gen
Das ist ein automatisch generiertes Verzeichnis von Android. Die automatisch generierte Klasse „R“ beinhaltet die Verweise auf die Ressourcen-Variablen und dient zum Zugriff auf diese aus dem Quellcode heraus. Zu den Ressourcen gehören unter anderen die übersetzbaren Strings, Layouts, Farben, Arrays, Bilder usw.
Android 2.2
In diesem Ordner ist die Android-Bibliothek abgelegt. Abhängig von der ausgewählten Android-SDK-Version wird eine andere Nummer angezeigt.
assets
In diesem Ordner werden Ressourcen abgelegt, die nicht über den Ressourcen-Manager verwaltet werden und in Unterverzeichnisse gegliedert werden können.
res
In diesem Ordner werden Ressourcen abgelegt, die über den Android-Ressource-Manager zur Verfügung gestellt werden und in der R.-Klasse abgebildet werden. Die einzelnen Unterordner werden weiter unten beschrieben.
drawable-XX
In diesen Ordnern werden die Bilder für die App gespeichert. XX steht dabei für eine bestimmte Ausflösungsdichte und wird dynamisch abhängig vom Auflösungsvermögen des Zielbildschirms ausgelesen.
layout
In diesem Ordner liegen die Layout-Definitionen für unsere App. In unserem Fall sollte am Anfang nur die Datei „main.xml“ vorliegen.
values
In diesem Ordner werden unterschiedliche Werttypen gespeichert. Unter anderem sind hier die Strings-Definitionen für die Mehrsprachigkeit einer App definiert. Weitere Wertgruppen sind zum Beispiel Farben, Designs, Arrays usw.
AndroidManifest.xml
Diese Datei definiert unsere App und regelt unter anderem auch die notwendigen Berechtigungen.

4. Das Layout

Währungsrechner-Layout
Währungsrechner-Layout

Unser Layout für die App besteht aus folgenden Elementen (Widgets):

  • EditText: Für die Eingabe des Betrages für die Umrechnung
  • Spinner: Zwei Auswahlboxen für die Auswahl der Ausgangs- und der Zielwährung
  • Button: Knopf, um die Umrechnung anzustoßen
  • TextView: Bereich, in dem die Ergebnisse angezeigt werden (zusammen mit älteren Umrechnungen)

4.1. main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <EditText
    	android:layout_height="wrap_content"
    	android:id="@+id/txtBetrag"
    	android:layout_width="fill_parent"
    	android:hint="@string/betrag_eingeben"
    	android:inputType="numberDecimal">
    </EditText>
    <LinearLayout
    	android:orientation="horizontal"
    	android:weightSum="3"
    	android:layout_height="wrap_content"
    	android:layout_width="fill_parent">
	    <Spinner
	    	android:layout_height="wrap_content"
	    	android:layout_width="0dp"
	    	android:layout_weight="1"
	    	android:id="@+id/selWaehrungStart">
	    </Spinner>
	    <Spinner
	    	android:layout_height="wrap_content"
	    	android:layout_width="0dp"
	    	android:layout_weight="1"
	    	android:id="@+id/selWaehrungEnde">
	    </Spinner>
	    <Button
	    	android:text="@string/cmd_berechnen"
	    	android:id="@+id/cmdBerechnen"
	    	android:layout_width="0dp"
	    	android:layout_weight="1"
	    	android:layout_height="wrap_content">
	    </Button>
	</LinearLayout>
	<ScrollView
		android:layout_height="fill_parent"
		android:layout_width="fill_parent">
	    <TextView
	    	android:id="@+id/txtErgebnisse"
	    	android:layout_width="fill_parent"
	    	android:layout_height="fill_parent"
	    	android:gravity="top">
	    </TextView>
	</ScrollView>
</LinearLayout>

Ein Android-Layout besteht aus einfachen Views (wie EditText, Button usw.) und den sogenannten View-Gruppen-Elementen, die weitere Elemente enthalten dürfen. Das oberste Element ist immer eine View-Gruppe. In unserem Fall ist es ein LinearLayour. Diese Gruppe richtet die enthaltenen Elemente abhängig von der Orientierung neben- (horizontal) oder übereinander (vertical) an (Zeilen 4 und 17). Das Linear-Layout Element aus der Zeile 2 ordnen somit alle enthaltenen Elemente untereinander. Und das Linear-Layout aus Zeile 15 ordnet die 3 enthaltenen Elemente nebeneinander.

Die Angabe in allen Views android:layout_width bestimmt die Bereite des Elementes, android:layout_height die Höhe. Es sind folgende Werte möglich:

  • fill_parent (oder match_parent): View nimmt die gesamte Breite / Höhe ein, die das Elternelement zur Verfügung stellt.
  • wrap_content: View nimmt die Breite / Höhe des eigenen Inhaltes ein.
  • Wert in Pixel (px) oder Device Independent Pixel (dp / dip).

Somit nimmt unser LinearLayout aus Zeile 2 die gesamte Breite und Höhe (ganzer Bildschirm), das EditText dagegen zwar die gesamte Breite, aber nur eigene Höhe ein.

In der Zeile 10 sehen wir ein spezielles Konstrukt (android:id="@+id/txtBetrag"). Mit dieser Angabe „@+id/“ teilen wir dem Compiler mit, dass dieses Element eine eindeutige ID erhalten soll, gefolgt von dem Namen, den wir frei vergeben können. Über diese ID können wir später auf das View aus dem Quellcode zugreifen (R.id.txtBetrag).

In der Zeile 12 (android:hint="@string/betrag_eingeben") kommt wieder ein spezieller Android-Konstrukt. Über die Angabe „@string/“ können wir auf die String-Ressourcen aus dem „res„-Ordner zugreifen. Das sind die übersetzten Text-Platzhalter. Die string.xml folgt weiter unten. Die Angabe android:hint legt einen Hinweistext fest, der nach der Eingabe der ersten Zahlen verschwindet.

Die Angabe in der Zeile 13 (android:inputType="numberDecimal") legen wir fest, dass im Eingabefeld nur positive Zahlen eingegeben werden dürfen.

Damit wir die 3 Views nebeneinander und in der gleichen Breite darstellen, nutzen wir statt der absoluten Breitenangabe (z.B. Zeile 22 android:layout_width="0dp") eine relative Angabe zum Eleternelemet. LinearLayout aus Zeile 15 definiert, dass den Kindelementen eine Gewichtungssumme von 3 zur Verfügung gestellt wird (Zeile 17 android:weightSum="3"). Die 3 Views haben jeweils eine Gewichtung von 1 (Zeile 23 android:layout_weight="1"), also genau 1/3 der Gesamtgewichtung.

In der Zeile 40 ist das TextView innerhalb eines ScrollView (View-Gruppe) platziert. Das erlaubt uns später durch die Ergebnisse zu scrollen, falls es mehr sein werden, als der Platz auf dem Bildschirm erlaubt.

Mit der Zeile 47 (android:gravity="top") geben wir an, dass der Text oben (im Bezug zum Elternelement) platziert werden soll.

4.2. strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="betrag_eingeben">Bitte den Betrag hier eingeben!</string>
    <string name="app_name">Währungsrechner</string>
    <string name="cmd_berechnen">Berechnen</string>
</resources>

Android: Erste App (Währungsrechner) – Teil 2

Ein Gedanke zu „Android: Erste App (Währungsrechner) – Teil 1“

Kommentar verfassen