Frau Nerd

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.

 

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

 

 

Die MainActivity.java

Dies hier ist die onCreate-Methode:

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

 

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;
}

Verbesserte Stoppuhr gestartet

Verbesserte Stoppuhr gestoppt