24 Feb

Wie du ganz einfach eine Stoppuhr-App programmieren kannst (Android App Tutorial)

In diesem Android Studio Tutorial zeige ich, wie du ganz einfach eine Stoppuhr-App programmieren kannst. Dafür verwenden wir ein Chronometer.

Wie du ganz einfach eine Stoppuhr App programmieren kannst

 

Grundsätzliches zur App

Bei dieser Beispiel-App (genannt Stoppuhr) habe ich mich wieder für API 16 (Android 4.1, Jelly Bean) und eine „Empty Activity“ entschieden. Sie beinhaltet drei Buttons. Ich gehe davon aus, dass du weißt, wie man eine App erstellt, und werde darauf nicht näher eingehen. Allgemein habe ich den Inhalt dieses Tutorials auf das Nötigste reduziert. Wenn du Fragen hast, kannst du diese gerne als Kommentar stellen. 😉

 

Die activity_main.xml

Die App verfügt über ein lineares Layout mit vertikaler Orientierung, das ein Chronometer und ein weiteres lineares Layout enthält. Dieses zweite lineare Layout hat eine horizontale Orientierung. Das ermöglicht uns, die drei Buttons in einer Zeile nebeneinander darzustellen.

Hier ist der Inhalt des ersten (= vertikalen) linearen Layouts. Das Chronometer hat einige Attribute bekommen, die für eine schönere Optik sorgen. 😉

<Chronometer
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:layout_gravity="center_horizontal"
    android:paddingTop="20dp"
    android:textSize="30sp"
    android:textIsSelectable="false"
    android:id="@+id/chronometer"
    android:textStyle="bold" />

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="20dp">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start"
        android:id="@+id/bStart" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stopp"
        android:id="@+id/bStopp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Neustart"
        android:id="@+id/bNeustart"/>

</LinearLayout>
Stoppuhr: Design-Ansicht und Component Tree

Stoppuhr: Design-Ansicht und Component Tree

 

 

Die MainActivity.java

Dies hier ist die onCreate-Methode:

onCreate der Stoppuhr-App: Buttons, Chronometer, abgelaufeneZeit

onCreate der Stoppuhr-App: Buttons, Chronometer, abgelaufeneZeit

Außer den Buttons und dem Chronometer brauchen wir noch eine Variable abgelaufeneZeit vom Typ long. Chronometer verfügt zwar über start() und stop(), aber auch nach dem Stoppen wird im Hintergrund weitergezählt. Heißt: Man stoppt beispielsweise bei 11 Sekunden, wartet kurz, drückt wieder auf „Start“ und plötzlich steht der Zähler auf 33. Das macht Chronometer eigentlich zur schlechtesten Stoppuhr aller Zeiten. 😛

Wir lassen Android Studio für uns die Methode setOnClickListener implementieren. Als erstes bekommt diese Methode eine Switch-Anweisung wie beim letzten Tutorial. So können wir herausfinden, welcher der drei Buttons gedrückt wurde, um entsprechend zu reagieren. Und brauchen jetzt noch etwas zusätzlich zu abgelaufeneZeit,  um die schlechteste Stoppuhr aller Zeiten brauchbar zu machen. Als Krücke benutzen wir SystemClock.elapsedRealtime().

switch (v.getId()) {
    case (R.id.bStart):
        chronometer.setBase(SystemClock.elapsedRealtime() + abgelaufeneZeit);
        chronometer.start();
        break;
    case (R.id.bStopp):
        abgelaufeneZeit = chronometer.getBase() - SystemClock.elapsedRealtime();
        chronometer.stop();
        break;
    case (R.id.bNeustart):
        chronometer.setBase(SystemClock.elapsedRealtime());
        abgelaufeneZeit = 0;
        break;
}

Falls Start gedrückt wurde: Das Chronometer wird auf SystemClock.elapsedRealtime() + abgelaufeneZeit gesetzt und gestartet.

Falls Stopp gedrückt wurde: Die abgelaufeneZeit wird (fürs spätere Starten) auf den Wert des Chronometers minus SystemClock.elapsedRealtime() gesetzt.

Falls Neustart gedrückt wurde:  Das Chronometer wird auf SystemClock.elapsedRealtime() gesetzt, abgelaufeneZeit wird auf 0 gesetzt.

Die Stoppuhr funktioniert

Die Stoppuhr funktioniert

 

Verbesserte Stoppuhr

Eine nach diesem Tutorial erstellte Stoppuhr funktioniert an sich schon. Aber es ist möglich, die Buttons mehrfach zu drücken (z.B. dreimal Stopp nacheinander, oder mehrfach Start) und somit falsche Werte zu erhalten. Wir können Buttons deaktivieren, nachdem sie gedrückt wurden. Die überarbeitete Switch-Anweisung sieht dann so aus:

switch (v.getId()) {
    case (R.id.bStart):
        chronometer.setBase(SystemClock.elapsedRealtime() + abgelaufeneZeit);
        chronometer.start();
        bStart.setEnabled(false);
        bStopp.setEnabled(true);
        break;
    case (R.id.bStopp):
        abgelaufeneZeit = chronometer.getBase() - SystemClock.elapsedRealtime();
        chronometer.stop();
        bStopp.setEnabled(false);
        bStart.setEnabled(true);
        break;
    case (R.id.bNeustart):
        chronometer.setBase(SystemClock.elapsedRealtime());
        abgelaufeneZeit = 0;
        break;
}
Stoppuhr gestartet

Verbesserte Stoppuhr gestartet

Stoppuhr gestoppt

Verbesserte Stoppuhr gestoppt

 

2 Gedanken zu „Wie du ganz einfach eine Stoppuhr-App programmieren kannst (Android App Tutorial)

  1. Hallo.
    witch (v.getId()) {
    case (R.id.bStart)
    chronometer.setBase(SystemClock.elapsedRealtime() + abgelaufeneZeit);
    chronometer.start();

    Bei mir erkennt der Android studio das R.id.bStart nicht. woran könnte es liegen?

    • Hallo Matthias!
      Erst einmal: Heißt der Button bStart? Und: Ist das „s“ von „switch“ beim Kopieren abhanden gekommen oder war das ein Tippfehler im Code? 😉
      Dann: Arbeitest du mit Fragments oder verschiedenen Dateien? Was passiert, wenn du einfach nur „(R.id.“ eingibst und auf Vorschläge von Android Studio wartest? Funktioniert alles andere?
      Manchmal hilft es auch schon, alles zu speichern und neu zu starten.
      Bitte schreib mir, ob eine der Sachen hilft oder auch nicht. Falls du weiterhin Probleme hast, brauche ich ein bisschen mehr von dem Code. Dann suchen wir weiter. 🙂

Kommentare sind geschlossen.