[How To] Erste Android App: "Hallo Sager"

Hallo Leute

Mit dem steigenden Interesse für die Android-App Entwicklung, möchte ich es Ein- und umsteigern erleichtern, den Einstieg zu finden. Deshalb werden ich euch zeigen, wie man ein simples GUI (GRAPHICAL USER INTERFACE) und etwas Stringverarbeitung umsetzt. Wenn alles klappt sollte das Ganze dann etwa so aussehen:

Voraus gesetzt werden das Android SDK (s.http://www.pocketpc.ch/android-allge...tc-desire.html) und etwas "Programmier-Verständnis".

Inhaltsverzeichniss

1. Neues Projekt erstellen

1.1 [Theorie] Aufbau eine Android Projektes

1.1.1 Übersicht

1.1.2 AndroidManifest.xml

1.1.3 res/layout/main.xml

1.1.4 res/values/strings.xml

1.1.5 src/de.test.hallo.HalloSager.javal

2. Layout definieren

3. Activity erweitern

Nun wollen wir gleich mal loslegen mit, wenig, aber wichtiger, Theorie zum Ablauf eines Android-Programmes. Hier eine Grafik die vereinfacht den Programmverlauf zeigt.

• Activity
• definiert eine "View", zur Anzeige auf dem Screen
• behandelt "Events" (z. B. Klick auf einen Button)
• benutzt "Intents", um andere Activities zu starten
  
  View
  
• eine "View" ist der sichtbare Teil der Activity
• definiert in einer XML-Layout-Datei (oder im Code)
  
  Event
  
• wird ausgelöst, wenn etwas geschieht (z. B ein Button geklickt wird)
• ruft eine Listener-Methode auf, sofern ein Listener definiert ist
  
  Intent
  
• startet eine andere Activity ("öffnet ein neues Fenster")
• kann Daten an die zu startende Activity übergeben
• kann Activities aus anderen Apps starten!

1. Neues Projekt erstellen


Um in Eclipse ein neues Projekt zu erstellen klicke in der Menüliste auf File > New > Project.... Wähle im Dioalog: Andriod > Android Project.
Es öffnet sich ein weiteres Fenster. Dieses bestimmt die Optionen zum Erstellen des Projektes. Bitte trage folgende Werte ein:

• Project Name: "Hallo Android"
• Build Target: bei mir Android 2.1 (bin glücklicher HTC Desire besitzer)
• Application Name: "Hallo Sager" (dieser Text wird als Name im Menü und oben an der app angezeigt.)
• Package name: "de.test.hallo"

Bestätigen tun wir das mit Finish.

1.1 [Theorie] Aufbau eine Android Projektes



1.1.1 Übersicht

Pfad bzw. Datei	Beschreibung
src/de.test.hallo.HalloSager.java	Klasse der Haupt-Activity
R.java	Resourcen-ID-Definitionen (wird automatisch erstellt, NICHT editieren!)
/assets	Ordner für Binär-Dateien (alles, was Android nicht selbst verwaltet)
/res	Ordner für Resource-Dateien (Bilder, Layouts, Strings, ...)
/res/drawable-hdpi/icon.png	Logo in hoher Auflösung (72 x 72 Pixel – 240 dpi)
/res/drawable-mdpi/icon.png	Logo in mittlerer Auflösung (48 x 48 Pixel – 160 dpi)
/res/drawable-ldpi/icon.png	Logo in niedriger Auflösung (36 x 36 Pixel – 120 dpi)
/res/layout/main.xml	Layout-Definition für View der Haupt-Activity
/res/values/strings.xml	(String-Array) "Texte" werden hier definiert
AndroidManifest.xml	"Metadaten"-Datei, definiert Infos wie Name, Logo (icon s.O) und Haupt-Activity
default.properties	Projekt-Eigenschaften

Im Allgemeinen ist es ratsam Dateien mit dem Text Editor zu öffnen, da man so dirket den Quellcode ansehen und bearbeiten kann.

Nun werde ich euch alle wichtigen Teile Etwas genauer beschreiben und Tipps geben.

1.1.2 AndroidManifest.xml

Hier der Aufbau einer Quelldatei (mit Beschreibung).


Um die App auf verschieden Displaygrössen lauffähig zu machen müssen wir zu Schluss (Zeile vor </manifest>) folgenden Code einfügen:

<supports-screens android:anyDensity="true"

        android:largeScreens="true" 

        android:smallScreens="true" />

1.1.3 res/layout/main.xml

Quellcode:

<?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"

    >

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:text="@string/hello"

    />

</LinearLayout>

Erklärung: Hier wird zuerst ein vertikales Layout erzeug. Anschliessend eine Textview (Label) mit einer Stringvariable aus dem String-Array (s.U), mit dem Namen "hello", gefüllt.


1.1.4 res/values/strings.xml

In dem Oben kurz erwähnten Stringarray werden ALLE Texte gespeichet.
In der Datei sollten 2 String definiert sein. "hello"(Bergüssungstext) und "app_name"(Name der App).

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="hello">Hello World, HalloSager!</string>

    <string name="app_name">Hallo Sager</string>

</resources>

1.1.5 src/de.test.hallo.HalloSager.java

package de.test.hallo;



import android.app.Activity;

import android.os.Bundle;



public class HalloSager extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}

Wichtig ist die letzte Zeile.

setContentView(R.layout.main);

Diese setzt das angegebene Layout als View dieser Activity.



2. Layout definieren


Da wir nun im Layout etwas ändern möchten benötigen wir die main.xml Datei. Diese ergänzen wir um eine Textview und ein Textfeld.

 

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:layout_marginTop="20dp"

    android:text="@string/namen_eingeben"

    />



<EditText

    android:id="@+id/name_field"

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    />

Eclipse wird nun einen Fehler anzeigen, da wir den String "namen_eingeben" nicht definiert haben. Deshalb fügen wir folgenden Code bei Strings.xml ein:

<string name="namen_eingeben">Bitte gebe deinen Namen ein: </string>

Unter dem Namens-Texteld wollen wir zwei Buttons nebeneinander anordnen. Dazu benötigen wir ein (zusätzliches) LinearLayout. Dieses Mal allerdings mit horizontaler Orientierung. Darin Platzieren wir anschliessen die zwei Buttons :

    <LinearLayout 

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

     >

     <Button 

        android:id="@+id/hallo_button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/hallo_button" 

        />

    <Button 

        android:id="@+id/guten_tag_button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="@string/guten_tag_button" 

        />

     </LinearLayout>

Es fehlen die Texte der Buttons. Also:

    <string name="hallo_button">Sag Hallo!</string>

    <string name="guten_tag_button">Sag Guten Tag!</string>

3. Activity erweitern

Nun erweitern wir unsere Activity. Öffne "HalloSager.java" und ersetze den ganzen Code durch den hier.

package de.test.hallo;



import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;



public class HalloSager extends Activity

    implements OnClickListener {



	private Button hallo_button;

	private Button guten_tag_button;



    @Override

    public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);



       hallo_button = (Button) findViewById(R.id.hallo_button);

       hallo_button.setOnClickListener(this);

       guten_tag_button = (Button) findViewById(R.id.guten_tag_button);

       guten_tag_button.setOnClickListener(this);



    }



    public void onClick(View v) {

	// TODO Auto-generated method stub

	

    }

}

Was wurde geändert?
Auf die class HalloSager wurde ein "OnClickListener" eingefügt, jeher wird benötigt um die zu prüfen, ob und welcher Button geklickt wurde. Der Listener wurde auch auf die Beide Buttons übertragen.

Füge anschliessen diesen Text in "public void onClick(View v) {}" ein.

    	EditText nameField = (EditText) findViewById(R.id.name_field);

    	 

        String name = nameField.getText().toString();

 

        if (name.length() == 0) {

            new AlertDialog.Builder(this).setMessage(

                    R.string.error_kein_name).setNeutralButton(

                    R.string.error_ok,

                    null).show();

            return;

        }



        if (v == hallo_button || v == guten_tag_button) {

            int resourceId = v == hallo_button ? R.string.hallo_antwort

                    : R.string.guten_tag_antwort;



            String antwort = getResources().getString(resourceId, name);

            Toast.makeText(this, antwort, Toast.LENGTH_LONG).show();



            TextView greetingField = (TextView) findViewById(R.id.antwort_feld);

            greetingField.setText(antwort);

        }

Folgende Strings fehlen

    <string name="error_kein_name">Bitte gebe deinen Namen ein</string>

    <string name="error_ok">OK</string>

    <string name="hallo_antwort">Hallo %s!</string>

    <string name="guten_tag_antwort">Guten Tag %s!</string>

Falls jetzt noch Fehler angezeigt werden, drücke [CTRL] + [SHIFT] + O, um die fehlenden imports anzufügen.

Um die Nachricht (Hallo/Guten Tag ...) als Text anzeigen zu lassen, muss man die erste TextView in main.xlm um dieses Attribut erweitern

android:id="@+id/antwort_feld" 

Nun das das Ganze nur noch über Run > Run Android Aplication starten

FERTIG!!!

Soo endlich fertig.

Hoffe ich kann damit einigen Helfen.

Verbesserungs Vorschläge sind jederzeit willkommen. Werde das ganze Heute oder Morgen nochmal überarbeiten. Bin jetzt zu müde.

LG und Gute Nacht
SiriusA

Hey danke!

Schöner Beitrag, werde ihn heute abend mal ausführlicher lesen.

Gerade jetzt wo ich eh mal vielleicht überlege n kleines bisschen für Android zu entwickeln (Sehr vorsichtig ausgedrückt) freue ich mich über solche Artikel.

Hier gibt es noch einen ähnlichen. Vielleicht wollt ihr Eure Artikel ja zusammenpacken oder in den gleichen Thread, damits übersichtlicher wird.

Gruß
Rumbel

Danke für deine Antwort.

Ich habe den Thread bereits Oben verlinkt. Zusammenschliessen würde ich die Threads nicht. Denn der eine behandelt die Einrichtung des SDKs (OK das hallo wellt aber ...) und der andere die Programmierung eines ersten Apps (mit Hintergrund informatikonen).

Ein Thread = Ein Thema.

B2T:
Ist das ganze verständlich formuliert?
Hat jemand schon versucht es nachzumachen? hats geklappt? Wo steckst du fest?

Also ich würde sie auch nicht zusammen tun.
Denn dieser Thread geht schon einiges mehr in die Tiefe als das Erste How-To.
Wenn alles schlussendlich in einem Thread wäre, würde es ziemlich schnell unübersichtlich werden.

Ich habe es nicht ausprobiert, aber kann es sein, dass du die Buttons im Layout und im Code unterschiedlich referenzierst? Einmal id.hi_button, einmal id.hallo_button.

Und: Vielen Dank!

Zitat von letier

Ich habe es nicht ausprobiert, aber kann es sein, dass du die Buttons im Layout und im Code unterschiedlich referenzierst? Einmal id.hi_button, einmal id.hallo_button.

Und: Vielen Dank!

Danke viel mal für den Fehler! Genau solche Kleinigkeiten sind es, die man selbst extrem schwer findet. hallo_button wäre das Richtige gewesen. Werde ich sofort beheben.

edit: -:FIXED:-

Hi,
sehr schöner Beitrag! Mir ist direkt ein bissl was mehr klar geworden, als beim durchstöbern der offiziellen Erklärungen. Gerade der Zusammenhang zwischen den xml-files und dem eigentlichen Code, den sollte man imo deutlicher hervorheben!
Zur besseren Übersichtlichkeit könnte man an den Anfang noch ein "Inhaltsverzeichnis" anlegen, damit man schonmal weiß was kommt.

kleiner Tippfehler noch in "1.1.2 AndroidManifest.xml": (Zeile vor </manifeast>)

Ansonsten wie gesagt, sehr schön! Ich hab auch schon ein paar tuts geschrieben und weiß deshalb wie schwer es ist, sowas für andere zu formulieren, was einem so im Kopf rumschwirrt
Grüße,

Zitat von bubbele

Hi,
sehr schöner Beitrag! Mir ist direkt ein bissl was mehr klar geworden, als beim durchstöbern der offiziellen Erklärungen. Gerade der Zusammenhang zwischen den xml-files und dem eigentlichen Code, den sollte man imo deutlicher hervorheben!
Zur besseren Übersichtlichkeit könnte man an den Anfang noch ein "Inhaltsverzeichnis" anlegen, damit man schonmal weiß was kommt.

kleiner Tippfehler noch in "1.1.2 AndroidManifest.xml": (Zeile vor </manifeast>)

Ansonsten wie gesagt, sehr schön! Ich hab auch schon ein paar tuts geschrieben und weiß deshalb wie schwer es ist, sowas für andere zu formulieren, was einem so im Kopf rumschwirrt
Grüße,

Danke für dein Feedback. Habe es mir zu Herzen genommen und ein paar Punkte verändert.

• Inhaltsverzeichniss mit Anker wurde eingefügt
• Rechtschreibung verbessert

Was du mit zur Erklärung, im Bezug zwischen auf xml-Dateien und der Activity, vermisst weiss ich leider nicht genau. Ich wäre sehr froh, wenn du mir das in einer PN vllt etwas genauer erklären kannst. Danke.

LG
SiriusA

und wie erstelle ich eine .apk aus der fertigen java datei???

wär noch intressant zu wissen.

Rechtsklick aufs Projekt -> Export -> Android und dann dem Wizard folgen.

ok danke hat geklappt.

hab so ne sinlose app gemacht die einen immer fragt: ''und dann?''.
wie im film: hey man wo ist mein auto.

Gern geschehen.

(Der Film ist der Hammer

hat sich erledigt

Hallo!

Ich habe dein Tutorial eben nur kurz überflogen. Aber eine Frage drängt sich mir auf. Warum implementierst du den OnClickListener in der Activity-Klasse?

Wie machst du das denn, wenn du mehr als einen Button hast? Ich verwende immer anonyme Implementationen der OnClickListener-Klasse. Ich meine, eine OnClick-Funktion pro Button wäre doch übersichtlicher, oder?

Ich kann folgendes Tutorial auch sehr empfehlen:

http://www.vogella.de/articles/Android/article.html