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

4.1 Kaffee Clicker

Nachdem wir nun in Kapitel 4. Erste App geklärt haben, was wir denn nun eigentlich vorhaben und uns bereits ein erstes Grundgerüst erstellt haben sollten wir anfangen zu programmieren.

GUI:

Ich persönlich würde vorschlagen wir beginnen mit dem Aussehen der App, damit wir später die benötigten Funktionen und Methoden einfach nur auf die jeweiligen gesetzten Elemente der UI aufschalten müssen. Die bereits im vorangegangenen Kapitel aufgeführen Bilder verwenden wir einfach weiter.

Unser Projekt sollte in der Zwischenzeit bereits von Android Studio erstellt worden sein, also suchen wir uns in der linken Liste den Ordner „drawable“ aus. Dieser sollte unter der Ordnerstruktur „app -> res -> drawable“ zu finden sein. Wir klicken auf diesen Ordner mit einem Rechtsklick und wählen aus der Liste den Punkt „Show in Explorer“, es sollte sich nun ein neues Fenster mit diesem Ordner öffnen. Speichert bitte hier die vier Bilder aus dem vorigen Kapitel ab.

 

In dem Ordner „drawable“ werden alle Dateien gespeichert, die in euerer App später einmal  als Bild angezeigt werden sollen. Ebenfalls wäre es möglich dort XML-Dateien abzulegen, die das Aussehen von Beispielsweise einem Button beschreiben. Weitere Informationen findet ihr in diesem Artikel: Drawable Ordner

 

Nun öffnet ihr bitte die Datei „acitvity_main.xml“, diese enthält das Aussehen eurer App.
Ihr solltet nach einer kleinen Wartezeit einen Editor eines Android Smartphones finden und dort drin enthalten ist ein kleiner Text („Hello World“).
Links dort neben findet ihr nun eine Liste an Elementen, die ihr per Drag-and-Drop in den Editor ziehen könnt.
Direkt unter dieser Liste findet ihr wiederrum zwei Tabs. Auf dem einen Tab steht „Design“, auf dem anderen Tab steht „Text“. Diese beiden Tabs dienen dazu die Wahl zwischen Drag-and-Drop oder dem Schreiben von Designs zu haben.

Momentan dürfte unter Text etwas stehen wie:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

 

Bitte schreibt dort folgendes hinein:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/kaffeebild"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/coffee_to_go_icon"
        android:adjustViewBounds="true"
        android:scaleType="center" />
</RelativeLayout>

Wenn ihr nun auf der rechten Seite in der Vorschau unseren Kaffeebecher in der Mitte des Handybildschirmes sehen könnt habt ihr bisher alles richtig gemacht.

 

Was haben wir eben getan?

Wir haben den Tag „<TextView>“ durch den Tag „<ImageView>“ ersetzt.
Wie der Name schon sagt können wir mit einem TextView Text anzeigen lassen und mit einem ImageView ein Bild.

  • Mit „android:layout_width=“fill_parent““ haben wir das Bild auf die volle Bildschirmbreite skaliert, dies verhindert, dass das Bild größer werden kann als der Bildschirm breit ist.
  • Mit „android:id=“@+id/kaffeeBild““ haben wir dem ImageView einen Namen gegeben, um es später in unserer Programmierung nutzen zu können. Es ist übrigens Ratsam jedem Element einen anderen Namen zu geben, damit man sich nicht verzettelt.
  • Mit „android:layout_centerVertical=“true““ & „android:layout_centerHorizontal=“true“ haben wir das Bild in der Mitte des Bildschirmes zentriert.
  • Mit „android:src=“@drawable/coffee_to_go_icon““ haben wir dem ImageView ein Bild mit dem Dateinamen „coffee_to_go_icon“ zugewiesen. Die Dateiendung ist nicht relevant.
  • Die letzten beiden Zeilen beheben ein paar Schönheitsfehler, die auftreten könnten. Nehmt sie einfach mal heraus und schaut was dann passiert 😉

 

 

Unser fertiges GUI:

Ich habe mir einmal erlaubt die weiteren nötigen Elemente ohne weitere Erläuterung einzubauen.
Die Vorgehensweise und die Tags sind die gleichen geblieben.
Ich habe lediglich ihren Namen, ihr Bild und ihre Position geändert.

Das fertige GUI sieht wie folgt aus:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/kaffeeBild"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/coffee_to_go_icon"
        android:adjustViewBounds="true"
        android:scaleType="center" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Geld:"
        android:id="@+id/geldAnzeige"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/kaffeeBild"
        android:layout_alignParentBottom="true"
        android:measureWithLargestChild="false"
        android:weightSum="3">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/shopBild"
            android:adjustViewBounds="true"
            android:src="@drawable/shop"
            android:scaleType="fitStart"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/recyclingBild"
            android:adjustViewBounds="true"
            android:src="@drawable/recycling"
            android:scaleType="fitCenter"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rabattBild"
            android:adjustViewBounds="true"
            android:src="@drawable/rabatt"
            android:scaleType="fitEnd"
            android:layout_weight="1" />
    </LinearLayout>

</RelativeLayout>

 

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.

Kommentar hinzufügen

*Pflichtfeld