Das Projekt soll den Body Mass Index (BMI) berechnen. Das ist eine einfache Formel, die das Gewicht durch das Quadrat der Größe teilt und so eine Zahl ermittelt. Dabei ist es dem BMI egal, ob das Gewicht von Muskeln oder Fett stammen. Wie unsinnig dieser Index auch sein mag. Er ist eine schöne Programmierübung.

Projekt erstellen

• File|New|New Project ...
• Empty Activity auswählen, dann Next anklicken
• Name: Bmi oder etwas anderes. Dies wird auch der Name des Programms werden.
• Language: Java, sofern Sie nicht unbedingt eine neue Sprache kennenlernen wollen, um damit ausschließlich Android zu programmieren.
• Minimum SDK: Für dieses Projekt dürften selbst ältere APIs funktionieren.
• Finish

Ein Blick auf MainActivity

OnCreate wird beim ersten Start hochgefahren und füllt den Bildschirm der Activity mit den Elementen, die in der Datei activity_main.xml definiert ist. Der Inhalt der XML-Datei wird durch den Aufruf von setContentView entfaltet.

package com.example.firs;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Ein Blick auf die res/layout/activity_main.xml

In der rechten Bildschirmhälfte sehen Sie den Inhalt des Bildschirmlayouts. Rechts über dem Inhalt stehen drei Symbole, die für die Darstellungsart zuständig sind:

• mehrere Linien untereinander (Code): Hier sehen Sie den XML-Code. Manchmal ist es einfacher, manchmal unvermeidbar, den erzeugten Code zu editieren.
• Linien und Rechteck (Split): Damit sehen Sie den XML-Code und seine Auswirkungen direkt nebeneinander.
• Rechteck mit Gebirge (Design): Der Design-Modus hat rechts das Design und links eine Palette, aus der Sie Kontrollelemente auf den Design-Schirm ziehen können.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Test

Es ist klug, diesen Test immer wieder durchzuführen, insbesondere, wenn Sie noch keine große Erfahrung haben.

Dabei müssen Sie sich entscheiden, ob Sie per Emulation oder per Smartphone testen wollen.

Ein neuer Dialog

Wenden Sie sich an die Palette, wechseln wenn nötig auf Common und ziehen eine Textview auf das Design-Fenster. Um das TextView erscheinen vier Kreise. Diese dienen als Ankerpunkte und können zu den Rändern oder benachbarten Kontrollelementen gezogen werden.

1. Einen TextView von der Palette ins Feld ziehen und dann anklicken.
2. Den linken Kreis anklicken und zum linken Rand ziehen.
3. Den oberen Kreis anklicken und zum oberen Rand ziehen.
4. Aus der Palette unter Text ein Plain Text ins Feld ziehen.
5. Den oberen Kreis an den oberen Rand ziehen.
6. Den linken Kreis auf den rechten Kreis des TextViews ziehen.
7. Den rechten Kreis an den rechten Rand ziehen.
8. Das TextView anklicken. Dessen unteren Kreis mit dem unteren Kreis des Plain Text verbinden.

1. Einen Plain Text unter den Plain Text schieben. Anklicken.
2. Den oberen Kreis des neuen mit dem unteren Kreis des bisherigen Plain-Text verbinden.
3. Den rechten Kreis mit dem rechten Rand.
4. Ein TextView aus der Palette links neben das neue Plain Text ziehen.
5. Den linken Kreis des PlainText mit dem rechten Kreis der TextView verbinden.
6. Das TextView anklicken. Dessen unteren Kreis mit dem unteren Kreis des Plain Text verbinden.

1. Von der Palette unter Buttons den Button wählen und unter der untersten TextView positionieren.
2. Den linken Kreis anklicken und zum linken Rand ziehen.
3. Den oberen Kreis des Buttons mit dem unteren Kreis des darüber liegenden TextViews verbinden.
4. Den unteren Kreis des Buttons mit dem unteren Rand verbinden.
5. Ein TextView aus der Palette rechts neben Button ziehen.
6. Den rechten Kreis an den rechten Rand ziehen.
7. Den linken Kreis auf den rechten Kreis des Buttons ziehen.
8. Den unteren Kreis mit dem unteren Kreis des Buttons verbinden.

Elemente benennen

1. Eingabefeld anklicken.
2. Unter Attribut steht: id, danach editText3. Letzteres in edGroesse ändern.
3. Android-Studio schlägt vor, alle Referenzen zu ändern. Das wäre gut. Yes.
4. Zweites Eingabefeld anklicken.
5. Unter Attribut id nach edGewicht ändern.
6. Android-Studio schlägt vor, alle Referenzen zu ändern. Das wäre gut. Yes.
7. Button anklicken. id nach butRechne ändern, text nach Berechne.
8. Die Textview rechts vom Button anklicken.
9. id nach tvErgebnis ändern, Text auf 0 setzen.
10. Die beiden TextViews links den Text auf Größe und Gewicht ändern.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Größe"
        app:layout_constraintBottom_toBottomOf="@+id/edGroesse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/edGroesse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/edGewicht"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/edGroesse" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gewicht"
        app:layout_constraintBottom_toBottomOf="@+id/edGewicht"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/butRechne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Berechne"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/tvErgebnis"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        app:layout_constraintBottom_toBottomOf="@+id/butRechne"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/butRechne" />
</androidx.constraintlayout.widget.ConstraintLayout>

Button-Klick fangen

Um auf dieses Ereignis zu reagieren, muss die MainActivity ...

• den OnClickListener implementieren,

  public class MainActivity extends AppCompatActivity
                            implements View.OnClickListener {
  

• Die Zeile wird rot und Android-Studio schlägt vor, die Methode onClick zu implementieren. das tun Sie:

  @Override
  public void onClick(View view) {
  
  }
  

• Der ClickListener muss auf den Button angemeldet werden. Dazu fügen Sie in der Methode onCreate folgende Zeilen ein:

  Button button = (Button) findViewById(R.id.butRechne);
  button.setOnClickListener(this);
  

  Der Button wird rot. [Alt]+[Return] drücken, und Android-Studio ergänzt eine import-Zeile.

@Override
public void onClick(View view) {
    TextView tvErg = (TextView) findViewById(R.id.tvErgebnis);
    tvErg.setText("2");
}

Geschäftslogik einbauen

@Override
public void onClick(View view) {
    EditText edGroesse = (EditText) findViewById(R.id.edGroesse);
    int groesse = Integer.parseInt(edGroesse.getText().toString());
    EditText edGewicht = (EditText) findViewById(R.id.edGewicht);
    int gewicht = Integer.parseInt(edGewicht.getText().toString());
    if (groesse>0) {
        double bmi = gewicht / (groesse * groesse / 10000.0);
        TextView tvErg = (TextView) findViewById(R.id.tvErgebnis);
        tvErg.setText("" + bmi);
    }
}

Eingabe auf Zahlen beschränken

Dazu wechselt man noch einmal zu res/layout/activity_main.xml. Dort klicken Sie im Designer die Eingafelder an. Auf der rechten Seite erscheinen die Attribute. Von besonderem Interesse ist inputType. Klicken Sie auf das Dreieck davor und setzen Sie einen Haken bei number und entfernen den bisherigen Haken. Im XML-Listing erscheint im Bereich EditText ein geänderter inputType:

Wenn Sie schon einmal dabei sind, können Sie in das Attribt text statt Name dann auch gleich eine 0 oder 1 setzen, oder den Eintrag leeren.

        android:inputType="number"