Wir entwickeln eine Aufgaben-App, mit der sich einzelne Punkte auf einer Liste abhaken lassen. Diese App eignet sich als ToDo-Liste, Einkaufsliste, Packliste bevor man auf Reisen geht und auch für Notizen.

In diesem Video geht es zunächst um das Design der App.

Aufbau

Die App ist ganz simpel aufgebaut. Ganz oben steht der Titel der App, wir nennen sie einfach „Checkliste“. Darunter befindet sich die eigentliche Liste mit den Aufgaben. Und am unteren Bildschirmrand haben wir ein Feld mit zwei Elementen. Das eine Element ist ein Eingabefeld, in das man neue Aufgaben tippen kann. Und rechts daneben befindet sich das zweite Element, und zwar ein Speichern-Button in Form eines Senden-Icons.

Sieh dir bitte zunächst das Video „Einführung in Android und Android Studio“ an, um Android Studio zu installieren und für das Projekt einzurichten, falls du das noch nicht getan hast.

Äußeres Layout

Als äußeres Layout verwenden wir ein LinearLayout mit vertikaler Orientierung. Es soll die volle Breite und volle Höhe des Bildschirms ausfüllen. Da die Aufgabenliste eine dynamische Höhe hat, müssen wir dem äußeren Layout ein weightSum von 100 geben.

RecyclerView

Immer wenn wir Listen darstellen wollen, nutzen wir das Element „RecyclerView“. Das ist allerdings standardmäßig nicht verfügbar. Wir müssen es erst importieren. Dazu öffnen wir die build.gradle (Module: app) Datei in unserer Projektstruktur. Dort können wir definieren, das unser Projekt Abhängigkeiten zu Komponenten hat, die nicht zum Standard gehören. Abhängigkeiten werden im Bereich „dependencies“ in dieser Datei definiert. Wir müssen die folgenden Zeilen dort hinzufügen:

def recyclerview_version = "1.1.0"
implementation "androidx.recyclerview:recyclerview:$recyclerview_version"

Das sieht dann also in etwa so aus:

Sobald du die build.gradle Datei geändert hast, musst du das Projekt synchronisieren. Dabei werden eben alle Abhängigkeiten importiert. Klicke dazu oben rechts in dem gelben Balken auf „Sync Now“.

Die RecyclerView können wir anschließend in unser Layout einbauen. Sie soll die volle Breite haben, die Höhe ist dynamisch, die setzen wir also auf 0 dip. Wichtig ist dabei auch das Attribut layout_weight = 100 anzugeben, um zu sagen, dass die Liste so hoch wie möglich sein soll, also den vollen Platz ausnutzen darf, eben bis auf die Elemente, die noch darunter platziert sind. Unsere Liste braucht auch eine ID, damit wir im Code darauf zugreifen können. Ich hab sie task_list genannt.

Eingabebereich

Der Eingabebereich soll unter die Liste platziert werden. Da dieser Bereich aus zwei Elementen besteht, benötigen wir wieder ein LinearLayout. Das ist diesmal orientation = „horizontal“, weil das Eingabefeld und der Sende-Button nebeneinander sein sollen. Die Breite des LinearLayouts soll die volle Breite sein. Die Höhe geben wir „wrap_content“ an, also nur so hoch wie unbedingt erforderlich. Weil die beiden innenliegenden Elemente dynamische Breiten haben, müssen wir auch bei diesem Layout wieder weightSum auf 100 setzen.

Das eigentliche Eingabefeld ist ein „EditText“. Die Breite ist dynamisch, die Höhe so hoch wie ihr Inhalt (wrap_content). Wir können auch einen Platzhalter-Text definieren, dazu nutzen wir das „hint“-Attribut. Gib dem Element auch eine ID, damit wir es später im Code ansprechen können, zum Beispiel „@+id/new_task“.

Daneben platzieren wir eine „ImageView“ zur Darstellung eines Bildes. Das Bild ist ein rundes Icon, das wir als Senden-Button nutzen.

Material Design Icons

Auf der Seite materialdesignicons.com findest du eine riesige Auswahl an Icons, die wir in unseren Projekten nutzen können.

Die Seite hat ein Suchfeld, in das du beliebige Begriffe eingeben kannst. In unserem Fall brauchen wir ein Senden-Icon, also gib „send“ oder „arrow“ ein. Dann suchst du dir ein Icon aus, klickst es an und wählst „Advanced Export“. Es öffnet sich ein Fenster mit verschiedenen Einstellungen. Hier kannst du die Größe des Icons wählen. Ich empfehle dir mindestens 192. Das ist ein guter Wert für ein hochauflösendes Icon, so dass es auch auf großen Tablets noch gut aussieht. Die Farbe des Icons spielt keine Rolle, weil wir die Farbe in unserem Layout-XML definieren können. Gib dem Icon einen Dateinamen und klicke dann einfach auf den „Icon“-Button. Die Icon-Datei wird heruntergeladen.

Kopiere sie und füge sie direkt in Android Studio im Ordner „res/mipmap“ ein. Du wirst daraufhin gefragt, in welchem mipmap-Ordner die Datei kopiert werden soll, wähle „mipmap-xxxhdpi“.

Senden-Button

Wie schon erwähnt, ist der Senden-Button einfach eine Image-View, also ein Element, das ein Bild anzeigen kann. Die Breite und Höhe sollte 48dip sein, dann sieht es vernünftig aus. Als Source (src-Attribut) wählst du das Icon, das du heruntergeladen hast. Gib hier „@mipmap/send“ an bzw. so wie du das Icon genannt hast. Um die Farbe des Icons zu definieren, verwendest du das „tint“-Attribut. Denk auch daran, der ImageView eine ID zu geben, zum Beispiel „@+id/send_button“.

Farben und Abstände

Wie man Farben in Android angibt, erkläre ich im Video „Spiele-App Bumm Teil 1“ am Ende. Diese Webseite hilft dir bei der Auswahl einer guten Farbe: https://html-color-codes.info/webfarben_hexcodes/

Die Farben definierst du wie immer in der colors.xml Datei, die du in der Projektstruktur unter res/values findest.

Bau auch ein paar Abstände ein. Ein guter Abstand zum Rand sind 16dip, das hat sich bewährt. Am besten setzt du ein Padding (innerer Abstand) von 16dip auf das zweite LinearLayout, das deinen Eingabebereich umschließt. Außerdem empfehle ich, einen Abstand zwischen Eingabefeld und Senden-Button einzubauen. Hierfür nutzt du „layout_marginEnd“ auf dem EditText, am Besten auch 16dip.

Aufgabenzeile

Die Liste in unserer App soll aus mehreren Aufgaben bestehen. Eine Aufgabe soll so aussehen, also eine Checkbox zum Abhaken und daneben der Name der Aufgabe:

Das Aussehen einer solchen Zeile für unsere Liste müssen wir separat definieren. Dazu erzeugen wir eine neue Layout-XML-Datei. In der Projektstruktur klickst du mit der rechten Maustaste auf res/layout und wählst „New“ „Layout Resource File“. Als Dateinamen gibst du am Besten „task_row“ ein, weil es sich ja um eine Aufgabenzeile handelt. Dann OK. Es wird eine neue XML-Datei erstellt und geöffnet.

Android Studio möchte uns dazu bewegen mit ConstraintLayouts zu arbeiten. Da das ein sehr komplexes Thema ist, verzichten wir darauf und nutzen es vorerst nicht. Das ConstraintLayout In der task_row-Datei ersetzen wir einfach durch eine CheckBox wie folgt:

Die Checkbox soll die volle Breite des Bildschirms haben. Die Größe ist nur so groß wie ihr Inhalt, also wieder wrap_content. Als Text kannst du dir irgend etwas ausdenken, das überschreiben wir später sowieso dynamisch in unserem Code. Es geht nur darum, dass man in der Design-Vorschau etwas sieht und die Schriftgröße gut abschätzen kann. Apropos Schriftgröße, ich hab sie auf 16sp gesetzt. Zur Erinnerung: Für Texte nutzen wir die Größeneinheit „sp“ und für Abstände, Breiten und Höhen „dp“. Damit wir zwischen unseren Aufgabenzeilen auch einen vernünftigen Abstand haben, setzen wir noch ein layout_marginBottom von 16 dip.

Layouts verknüpfen

Wir haben jetzt 2 Layouts: Das Haupt-Layout main_activity.xml und das Layout für eine Aufgabenzeile task_row.xml. Die RecyclerView in unserer main_activity.xml soll das Layout der task_row.xml nutzen, um Aufgaben zeilenweise darzustellen. Um das zu erreichen, nutzen wir das Attribut listitem und verknüpfen somit unsere beiden Layouts.

tools:listitem="@layout/task_row"

In der Design-Vorschau siehst du dann, dass die Liste unsere Checkboxen anzeigt. Perfekt!

Learning by Doing

Versuch doch mal einen Dark Mode (Night Mode) einzubauen. Wie das geht, erkläre ich dir hier: „Spiele-App Bumm Teil 3„.

Spiel auch ein bisschen mit den Farben und Abständen, um die App individueller zu gestalten.

Denk auch daran, dass eine gute App auch ein schönes App-Icon braucht. Wie das geht, erkläre ich auch hier: „Spiele-App Bumm Teil 3„.

Quellcode herunterladen

Wenn du möchtest, kannst du dir den kompletten Quellcode der App herunterladen. Das kann dir helfen, falls du beim Nachbauen nicht weiterkommst. Klicke dazu hier.