tutorials.de Buch-Aktion 05/2012
  • Android - Installation und erste App (BMI-Berechner)

    Das Betriebssystem vieler neuer Smartphones (nicht iPhone) heißt Android, man kann Apps dafür mit Hilfe von ein wenig XML gut in Java programmieren.



    Am besten entwickelst du mit eclipse,
    außerdem sind noch die folgenden Schritte nötig:
    • installiere das Android-SDK (Standard Developement Kit)
    • Android 1.6 System Image (Die Dateiträger-Abbilddatei) herunterladen und ZIP extrahieren
    • starte C:\Program Files\Android\android-sdk\SDK Manager und erzeuge eine
      AVD (Android Visual Device) für dein Smartphone
    • Kopiere system.img aus dem Verzeichnis, in das extrahiert wurde und füge es in .android\avd\<AVD-Name>\ in ihrem Benutzer-Verzeichnis ein.
      (Unter Mac muss eingestellt sein, dass System-Verzeichnisse sichtbar sein sollen)
    • zum Schluss noch eclipse starten und im Menü unter 'Help.Install New Software...' eine neue
      Repository mit der URL: https://dl-ssl.google.com/android/eclipse/ hinzufügen
    • mache nun ein neues Android-Projekt auf...


    src/Main.java sieht dann wohl ungefähr so aus:
    Code java:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    package de.tutorials;
     
    import android.app.Activity;
    import android.os.Bundle;
     
    public class Main extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // res/layout/main.xml wird als Inhalt festgelegt
            setContentView(R.layout.main);
        }
    }

    Um "Hallo World!" auszugeben, startest du das Projekt als Android-Application,
    der Emulator braucht manchmal etwas (vor allem beim ersten Boot einer AVD), auf deinem Smartphone wird alles wesentlich schneller funktionieren.

    Wähle anschließend die Code-Ansicht von res/layout/main.xml um eine richtige App zur BMI-Berechnung zu programmieren, im Beispiel verschachtle ich LinearLayouts ineinander, ich denke die Eigenschaften-Definitionen erklären sich von selbst.

    Hier der Code:
    Code xml:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    
    <?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"
        >
        <!-- HEIGHT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="horizontal"
            android:layout_width="fill_parent"<!-- Komponente nutzt allen zur Verfügung stehenden Raum -->
            android:layout_height="wrap_content"<!-- Gegenteil zu ^ -->
            >
            <TextView
                android:id="@+id/height_lable" 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="6"<!-- Anteil am Platz -->
                android:layout_marginTop="15dp"
                android:layout_marginLeft="8dp"
                android:text="@string/height_lable"
                android:textStyle="bold"
            />
            <EditText
                android:id="@+id/height_field"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:layout_marginTop="15dp"
                android:layout_marginRight="8dp"
                android:singleLine="true"
                android:gravity="right"
            /> 
        </LinearLayout>  
        <!-- WEIGHT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
            <TextView
                android:id="@+id/weight_lable" 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="6"
                android:layout_marginLeft="8dp"
                android:text="@string/weight_lable"
                android:textStyle="bold"
            />
            <EditText
                android:id="@+id/weight_field"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:layout_marginRight="8dp"
                android:singleLine="true"
                android:gravity="right"
            /> 
        </LinearLayout>  
        <!-- RESULT -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
            <Button
                android:id="@+id/calculate_button"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="6"
                android:layout_marginLeft="8dp"
                android:text="@string/calculate_button"
                android:textStyle="bold"
            />
            <TextView
                android:id="@+id/result_lable"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:layout_marginRight="8dp"
                android:layout_marginLeft="25dp"
                android:textStyle="bold"
            />
        </LinearLayout>
        <!-- DIAGNOSIS -->
        <TextView
            android:id="@+id/diagnosis_lable"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginRight="8dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="6dp"
            android:textStyle="bold"
        />
     
    </LinearLayout>

    Referenzierte String oder Ähnliches wie z.B. 'android:text="@string/calculate_button"' in Zeile 73 müssen in res/values/strings.xml deklariert werden, die dann so aussieht:

    Code xml:
    1
    2
    3
    4
    5
    6
    7
    8
    
    <?xml version="1.0" encoding="utf-8"?>
     
    <resources>
        <string name="app_name">BMI Calculator</string>
        <string name="height_lable">Height: </string>
        <string name="weight_lable">Weight: </string>
        <string name="calculate_button">Calculate</string>  
    </resources>

    Mittlerweile fehlt nur noch die eigentliche Logik des Programms, die in Main.java gehört.

    Im folgenden Code werden Integers wie 'R.id.result_lable' benutzt, sie liegen in der automatisch generierten Klasse 'R' und repräsentieren Ressourcen.
    Code java:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    
    package us.javauniverse.android;
     
    import android.app.Activity;
    import android.app.AlertDialog;
    import android.view.View.OnClickListener;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.TextView;
     
    public class Main extends Activity implements OnClickListener {
        
        private Button button;
     
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            // der Button wird als Java-Objekt erzeugt und bekommt eine Listener
            button = (Button) findViewById(R.id.calculate_button);
            button.setOnClickListener(this);
        }
     
        public void onClick(View v) {
            TextView tv_result = (TextView) findViewById(R.id.result_lable);
            TextView tv_diagnosis = (TextView) findViewById(R.id.diagnosis_lable);
            EditText et_height = (EditText) findViewById(R.id.height_field);
            EditText et_weight = (EditText) findViewById(R.id.weight_field);
            try{
                // BMI berechnen
                double height = Double.parseDouble(et_height.getText().toString());
                double weight = Double.parseDouble(et_weight.getText().toString());
                double result = (weight / (height*height));
                // Diagnose auswählen
                if(result < 16.5){
                    tv_diagnosis.setText("Diagnosis: Severely Underweight");
                    tv_result.setTextColor(getResources().getColor(R.color.red));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.red));
                }
                else if(result < 18.5){
                    tv_diagnosis.setText("Diagnosis: Underweight");
                    tv_result.setTextColor(getResources().getColor(R.color.yellow));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.yellow));
                }
                else if(result < 25){
                    tv_diagnosis.setText("Diagnosis: Normal");
                    tv_result.setTextColor(getResources().getColor(R.color.green));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.green));
                }
                else if(result < 30){
                    tv_diagnosis.setText("Diagnosis: Overweight");
                    tv_result.setTextColor(getResources().getColor(R.color.yellow));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.yellow));
                }
                else if(result < 35){
                    tv_diagnosis.setText("Diagnosis: Obese Class I");
                    tv_result.setTextColor(getResources().getColor(R.color.yellow));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.yellow));
                }
                else if(result < 40){
                    tv_diagnosis.setText("Diagnosis: Obese Class II");
                    tv_result.setTextColor(getResources().getColor(R.color.red));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.red));
                }
                else{
                    tv_diagnosis.setText("Diagnosis: Obese Class III");
                    tv_result.setTextColor(getResources().getColor(R.color.red));
                    tv_diagnosis.setTextColor(getResources().getColor(R.color.red));
                }
                // Ergebniss runden und ausgeben
                result *= 100;
                int roundedResult = (int) result;
                result = roundedResult;
                tv_result.setText("BMI: "+result/100);
            }
            // bei falschen Eingaben (keine Zahlen)
            catch(NumberFormatException ex){
                tv_result.setText("");
                tv_diagnosis.setText("");
                new AlertDialog.Builder(this).setMessage("Please just enter numbers!").setNeutralButton("OK", null).show();
            }
        }
        
    }

    Auch 'R.color.yellow', ect. müssen in XML deklariert werden, und zwar in res/values/color.xml

    Hier der Datei-Inhalt:
    Code xml:
    1
    2
    3
    4
    5
    6
    7
    
    <?xml version="1.0" encoding="utf-8"?>
     
    <resources> 
        <color name="green">#0F0</color>
        <color name="yellow">#FF0</color>
        <color name="red">#F00</color>
    </resources>

    Wenn du das Projekt jetzt wider startest, hast du schon eine ziemlich professionelle App,
    die beliebig verändert und erweitert werden kann.

    Die Dokumentation der Bibliotheken findest du unter http://developer.android.com/reference/packages.html

    Im Anhang der gesamte Projekt-Ordner und zwei Screenshots der App.

    javaDeveloper2011
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken content/attachments/57206-screenshot1.gif.html   content/attachments/57205-screenshot2.gif.html  

    Angehängte Dateien Angehängte Dateien


    Kommentare 6 Kommentare
    1. Avatar von javaDeveloper2011
      javaDeveloper2011 -
      Hi,

      wer jetzt Lust auf Android bekommen hat, für den gibt es eine schöne Reihe von Video-Tutorials zur Spieleprogrammierung in Android. (englisch)
      Dabei wird dann auch alles in Java gemacht (kein XML).

      hoffe ihr lernt dabei auch so viel wie ich,
      javaDeveloper2011
    1. Avatar von Fabio Hellmann
      Fabio Hellmann -
      Hi,

      ich würde zu den EditText in den Eigenschaften noch ein android:inputType="numberDecimal" hinzufügen, dann kann erst gar kein Text eingegeben werden, sondern nur Zahlen.

      Gruß

      Fabio
    1. Avatar von javaDeveloper2011
      javaDeveloper2011 -
      Hi,

      noch ne super Quelle für Android:
      http://mobile.tutsplus.com/tutorials/android/

      Überblick über die Wichtigsten UI-Elemente:
      http://www.droiddraw.org/widgetguide.html
    1. Avatar von javaDeveloper2011
      javaDeveloper2011 -
      Hi,

      wer schnell man (halbwegs selbst gemachte) Icons für Android in allen Auflösungen braucht,
      ist hier gut aufgehoben.
    1. Avatar von javaDeveloper2011
      javaDeveloper2011 -
      Ein super (eigentlich) komplettes freies Android-Video-Tutorial in 200-Youtube-Filmen
    1. Avatar von javaDeveloper2011
      javaDeveloper2011 -
      Spieleentwicklung 101 @ AndroidPIT
    Kommentare Kommentar schreiben

    Klicke hier, um dich anzumelden

    Wie heißt die Bundeskanzlerin der BRD mit Nachnamen? Angela...