Apps für Android programmieren leicht gemacht!
4.5 Kaffee Clicker

4.5 Kaffee Clicker

In den letzten 5 Artikeln des Kapitels 4 sind wir ja bereits weit mit unserer ersten eigenen Android App gekommen.
Eigentlich könnte man fast sagen sie wäre Reif für den Google PlayStore.

Leider ist dem bisher nicht so.
Wir haben eine bisher recht solide erste App erstellt. Nun fehlt uns noch der Feinschliff, sowie ein rechtlich wichtiger Backlink.

 

Feinschliff:

Wie uns bereits in einem vorigen Artikel aufgefallen ist wird die Geldanzeige etwas komisch dargestellt.
Statt nämlich von 0,98€ auf 1€ zu springen, springt sie auf 0,999999999998€.
Das mag uns bislang nicht weiter gestört haben, immerhin sind diese beiden Werte extrem nah an einander.
Für eine marktreife App ist diese Anzeige allerdings nicht zu gebrauchen.

Geldbetrag mit Fehler
Geldbetrag mit Fehler

Wir sollten nun zwei kleinere Dinge durchführen.

  1. Alle „Float“ in unserer App durch „Double“ ersetzen, weil diese die doppelte Genauigkeit haben. (Auch alle „F“ hinter Zahlen durch „D“ ersetzen)
  2. Die Anzeige der Geldbeträge auf 2 Nachkommastellen kürzen.

 

Auf das Ersetzten der Float in Double gehe ich jetzt nicht weiter ein.
Um jedoch auf 2 Nachkommastellen zu kürzen gibt es diese nette Funktion:

String.format("%.2f", wert);

Sie wandelt eine Kommazahl in einen Text (String) um und rundet dabei auf die Vorschrift auf.

Da wir auch nicht mehr als einen String benötigen – wir müssen ja nicht mehr weiter mit der Zahl rechnen – können wir einfach ersetzen:

//Alle Stellen mit:
geldAnzeige.setText("Geld: " + geld + "€");

//Ersetzen durch:
geldAnzeige.setText("Geld: " + String.format("%.2f", geld) + "€");
Geldbetrag ohne Fehler.
Geldbetrag ohne Fehler.

 

Weiterer Feinschliff:

Des Weiteren haben wir bisher noch ein weiteres ganz kleines, aber nicht schönes Problem.
Wenn wir unsere App öffnen zeigt unsere Geldanzeige den Text „Geld:“ an, aber noch keinen dazugehörigen Geldbetrag.

Dieses Problem tritt auf, weil wir im Layout festgelegt haben, dass in der TextView „Geld:“ stehen soll.
In der Methode „onCreate“ könnten wir nun das TextView mit dem aktuellen Betrag setzen, doch tun wir dies noch nicht.

Ergo schreiben wir

geldAnzeige.setText("Geld: " + String.format("%.2f", geld) + "€");

ans Ende der Methode „onCreate“ und unser Problem ist gelöst.

 

Backlink:

Wie bereits in Kapitel 4. angesprochen unterliegen die verwendeten Bilder der Lizenz von http://icons8.com/license/.
Diese Lizenz lässt uns zwar die Grafiken kostenfrei nutzen, aber wir müssen versprechen einen Link/Hinweis zu Icons8.com zu setzen.

Bevor wir nun also beginnen können die App im Google PlayStore zu veröffentlichen müssen wir einen Hinweis hinzufügen.
Falls ihr die App veröffentlichen und diesen Hinweis nicht einfügen wollt empfehle ich andere Grafiken zu nutzen. – Es kann sonst große Probleme geben.

Persönlich würde ich vorschlagen, dass wir oben in der momentan blauen Actionbar ein Menü einfügen und über dieses Menü eine Kategorie „Über“ anzeigen lassen.
In dieser Kategorie „Über“ werden wir einfach rechtliche Hinweise zeigen.

actionbar menü
Dies ist ein Actionbar Menü.

Wir benötigen einen Text für unser Menü.
Diesen Text definieren wir in der Datei „res -> values -> strings.xml“:

<!-- Text für unser Menü -->
<string name="ueber">Über</string>

 

Anschließend erstellen wir den Ordner „res -> menu“ und dort hinein die Datei „actionbar_menu.xml“.
In diese Datei schreiben wir:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- Menüpunkt, der angezeigt wird, wenn auf die drei Punkte in der Actionbar geklickt wird. -->
    <item android:id="@+id/menu_ueber"
        android:title="@string/ueber"
        app:showAsAction="never"/>

</menu>

Nun haben wir eine Datei erstellt, in der wir definieren können welche Menüpunkte unser Actionbar Menü besitzen soll. Als Text für den Menüpunkt nutzen wir die Zeile 6.

 

Angezeigt wird unser Menü nach diesen Änderungen allerdings noch nicht.
Wir müssen vorerst wieder in die Datei „MainActivity.java“ wechseln.
Mit folgender Methode zeigen wir ein Menü an, welches in der Datei „actionbar_menu“ definiert wurde:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.actionbar_menu, menu);
    return true;
}

 

Wir haben inzwischen ein Menü mit Menüpunkten erstellt und zeigen es auch an. Bisher reagieren wir allerdings noch nicht auf Klicks.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menu_ueber:
            // Dieser Teil (bis zum "return") wird ausgeführt, wenn wir auf den Menüpunkt mit der ID "menu_ueber" klicken. 
            // Diese Zeile durch Code ersetzen
            return true;

        default:
            // Standardfunktion. Sollte bestehen bleiben.
            return super.onOptionsItemSelected(item);

    }
}

 

So soll es später einmal aussehen. Ein Dialogfeld, mit Button und rechtlichen Hinweisen.
So soll es später einmal aussehen. Ein Dialogfeld, mit Button und rechtlichen Hinweisen.

 

Um ein Dialogfeld anzeigen zu können müssen wir eine statische Klasse „UeberDialog“ innerhalb unserer bestehenden Klasse „MainActivity“ erstellen.

//Kleine Klasse zum Erstellen eines Dialogs
public static class UeberDialog extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        //Dialog erstellen
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

        //Befülle Dialog mit dem Text "ueber_text" aus der Datei res -> strings.xml
        builder.setMessage(R.string.ueber_text)

                //Erstelle einen Button mit dem Text "ok"  aus der Datei res -> strings.xml
                .setPositiveButton(R.string.ok, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {

                        //Schließe das Dialogfeld, beim Klick auf den erstellten Button
                        dismiss();

                    }
                });

        //Gib das erstellte Dialogfeld an die aufrufende Klasse zurück, um es anzeigen zu können.
        return builder.create();
    }
}

 

Zusätzlich benötigen wir zwei weitere definierte Texte in unserer Datei „res -> strings.xml“:

<!-- Text für unser Dialogfeld -->
<string name="ueber_text">Grafiken von Icons8.com\n\nDiese App wurde nach Anleitung von Droid-Lernen.de erstellt und steht unter der Apache 2.0 Lizenz.</string>

<!-- Text für unseren Button "OK" -->
<string name="ok">OK</string>

 

Und geöffnet werden muss unser Dialogfeld ebenfalls.
Dazu ersetzen wir die Stelle „// Diese Zeile durch Code ersetzen“ der Methode „onOptionsItemSelected“ durch:

DialogFragment newFragment = new UeberDialog();
newFragment.show(this.getFragmentManager(), "Über");

 

Ich weiß, dass vor allem der letzte Abschnitt etwas schnell von Statten ging.
Ich hoffe ihr kamt mit. Falls Fragen aufkamen, dann schreibt diese ruhig in unser Kommentarfeld.

Im nächsten und letzten Artikel zu Kaffee Clicker werde ich dann auch den Source Code zum Download anbieten.

Marvin

Ich bin 23 Jahre jung und studiere zurzeit Wirtschaftsinformatik an der Georg-August-Universität in Göttingen. Ich bin ein Mensch, der sich neben der Programmierung noch für tausend andere Dinge interessiert, die mal mehr und mal weniger verrückt sind. Vor allem aber bin ich Feuer und Flamme mit der Programmierung von eigenen kleinen Apps und Programmen, die mein Leben bereichern.

2 Kommentare

*Pflichtfeld

  • Nach dem Ersetzen von Float zu Double wurden bei mir 2 Sachen rot markiert:
    editor.putDouble(name, wert);
    return pref.getDouble(name, standardwert);
    putDouble und getDouble
    Wo liegt der Fehler ?

    • Hallo Sebastian,
      Dann sind die nötigen Imports noch nicht gemacht.
      Geh einfach mit der Maus und dem Zeiger auf die Stelle und klicke dann Alt+Enter, wenn sich ein Pop-Up auf macht.

      Gruß