Suche in dem Explorer nun nach den Layout Files. Diese sind in Android Projekten immer im Ordner unter res/layouts zu finden.

Wie du hier sehen kannst, gibt es nur ein File activity_main.xml.

Diese Activity steht für die einzelne Ansicht mit dem "Hello World" Schriftzug.
Mittels dem Text-Reiter kannst du dir die XML-Datei anzeigen lassen. Gib hier direkt im XML in Zeile 3 mit android:id="@+id/root" dem ConstraintLayout eine ID. Alternativ, kann das auch über den Desing-Reiter geschehen, bei dem unter Attributes die ID direkt eingetragen wird.

Die ID werden wir später noch brauchen.

Eine Activity ist die Basiskomponente für eine App und kann vom System aus, aber auch codeseitig, aufgerufen werden.
Da eine App keine monolithische Anwendung ist und daher nicht einen fest definierten Startpunkt hat, wann diese mit der Programmausführung startet, gibt es hier auch keine Main Methode. Viel eher durchläuft eine Activity folgenden Lifecycle:

Daher gilt:

in onCreate() wird die UI erstmalig gebaut. Deswegen finden wir hier auch im MainActivity File diese Methode die mit setContentView(R.layout.activity_main) beschreibt, dass die Ansicht aus dem xml-File gebaut werden soll.

Wir versuchen jetzt die onResume()-Methode zu überschreiben

import android.widget.Toast

override fun onResume() {
        super.onResume()
}

und einen "Toast" auszugeben, wann immer die Methode von Android aufgerufen wird mit:

Toast.makeText(this, getString(R.string.hello), Toast.LENGTH_SHORT).show()

Ist dir aufgefallen, dass "hello" rot aufleuchtet? Das liegt daran, dass Android eine R Datei generiert um Ressourcen, die unter dem res Ordner abgelegt sind, eine ID zu vergeben und diese nicht aufgelöst werden kann. Um das zu ändern gehen wir in das "strings.xml"-File unter res/values/ und legen den String mit

<string name="hello">Resumed!</string>

an.

Jetzt sollte der Code kompilieren. Probiere es dann auf dem Gerät per run aus. Teste die Anwendung und tippe auf die Betriebssystem Home Taste und komme anschließend wieder zur Anwendung zurück. Das Android System wird gewöhnlich die App nicht neu bauen müssen und führt daher onResume() noch mal aus. Beobachte auch, was bei Rotationen des Gerätes passiert.

Schicker ist allerdings eine Snackbar, die sogar Aktionen ausführen kann. Um eine Snackbar zu nutzen, brauchen wir erstmal die Design Library von Google, die viele neuere Material Widgets beinhaltet.

Zum Einbinden der Library gehst du in das build.gradle File der App. Android Studio fasst alle gradle-Files unter "Gradle Scripts" zusammen.

Füge irgendwo unterhalb des dependencies-Block

implementation 'com.android.support:design:29.0.0'

ein. Wenn dich Android Studio fragt, ob du das Projekt neu syncen möchtest, tu das und beobachte, wie die Designlibrary heruntergeladen und ins Projekt eingefügt wird.

Jetzt kannst du an die Codestelle in der OnResume-Methode zurückkehren und anstelle des Toastes schreiben wir:

Snackbar.make(root, getString(R.string.hello), Snackbar.LENGTH_SHORT).show()

💡Einen Auto Import von Klassen geht in der Regel per ALT/CMD + Enter!

Sicherlich ist es spätestens an dieser Stelle aufgefallen, dass hier immer wieder nach dem Context gefragt wird.

Der Context bietet den Zugriff auf Appresourcen und Systemkomponenten. Ui-Elemente können daher grundsätzlich ohne Context nicht gebaut werden.

⚠️ Wichtig: Leider kann man hier recht viel falsch machen. So können verschiedene Komponenten auf verschiedene Kontexte basieren. Beispielsweise hat die komplette App ihren App Context, die Activity aber ihren Activity Context.

Nun zurück zum acitvity_main-File.

Der Layouteditor zeigt nebeneinander im rechten Teil das gerenderte Layout mit Zusatzinformationen wie Ränder um einzelne Elemente und im linken Teil das XML auf das das Rendering basiert.

Im Grunde kann man im Komponenten-Baum links den Aufbau nachvollziehen. Dort gibt es einen Reiter "Palette", der die Standardkomponenten von Android umfasst und per Drag&Drop in das Layout gezogen werden kann. Eine solche UI-Komponente basiert auf der View-Klasse, die intern ein Canvas nutzt, um mit draw()-Operationen in der Regel 60 mal pro Sekunde neu zu zeichnen.

Ziehe dir irgendwohin einen Button, und schaue das XML genauer an, was beim Ziehen passiert. Natürlich kann man diesen Button auch rein im XML bauen: Schon beim Tippen von <B erscheint dazu eine Vervollständigung.
Mindestens die Breite und die Höhe, die der Button haben soll, muss vorgegeben werden.

Da wir in einer Zeit leben, in denen es die Unterschiedlichsten Geräte gibt, mit ganz unterschiedlichen Formfaktoren, besteht hier das Können darin, die Größen so zu wählen, dass sie in den aller meisten Fällen passen.

Probiere ein wenig herum in dem du "layout_width" auf eine beliebige Größe, wie 200dp, setzt. "dp" sind dabei von der Auflösung unabhängige Pixel. Spiele auch mit "match_parent" und "wrap_content" und beobachte, ob es das macht, was du vermutest.

Jetzt geben wir dem Button noch eine "id" mit dem Wert "profile_button". Das geht entweder direkt im XML oder über den grafischen Editor unter "Attributes".

Ist das erledigt, gehe in die MainActivity.

Hier geben wir unserem Button jetzt eine Funktion. Dazu müssen wir im Code den Button finden, das ist durch die ID sehr einfach, daher kann im Code:

profile_button.setOnClickListener {

}

benutzt werden. Kopiere nun deinen Snackbar-Aufruf in das Lambda von dem OnClickListener und Lösche den kompletten onResume() Block.

Teste die Anwendung. Macht sie was du denkst?

In den nächsten Schritten wird unsere UI wesentlich interessanter, also schauen wir erstmal, dass der Button und der Hello World Schriftzug uns nicht im Wege stehen und die Snackbar nicht nervt.

Füge in der activity_main.xml Datei jeweils im Block der <TextView> und des <Button> ein android:visibility="gone" hinzu. Damit versteckst du diese UI Elemente.

Kommentiere den Snackbar Befehl aus.

Klasse.

Als Nächstes bauen wir eine richtige Navigation!

Mache nun weiter mit den Navigation.