25 Apr, 2018

Die wichtigsten Android Layout-Elemente – Android App Entwicklung für Anfänger #5

Hi, heute stelle ich dir die wichtigsten Android Layout-Elemente vor. Diese bilden die Basis deiner Designarbeit und finden in den meisten App-Layouts platz.

Übersicht

Button

Der Button ist dazu da, dass dein Nutzer eine Aktion, welche du mit einem Text oder Icon beschreibst, ausführen kann. Eine Anwendung des Buttons ist beispielsweise eine Bestätigung einer Handlung.

Um einen Button in dein Layout einzufügen, hast du prinzipiell drei Möglichkeiten. Die Auswahl richtet sich danach, ob du einen Text oder ein Icon zur Beschreibung nutzt:

Mit Text

Mit Icon

Mit Text und Icon

Auf einen Klick reagieren

Um auf einen Klick eines Nutzers zu reagieren, stehen dir zwei Optionen zur Verfügung.

Im Layout definieren

Wenn es sich bei deinem Layout um das deiner Activity handelt, kannst du mit android:onClick“beispielMethode“ die Methode deiner Activity, welche beim Klick ausgeführt werden soll, angeben. Diese Methode muss:

  • void zurückgeben
  • public sein
  • einen einzigen Parameter vom Typ View besitzen

Beispiel:

Im Java-Code mithilfe eines OnClickListeners definieren

Bei dieser Methode definierst du die Aktion, welche bei einem Klick ausgeführt werden soll, im Java-Code deiner App. Hierbei benötigst du zuerst eine Referenz auf deinen Button, welche du dir in deiner Activity mit der Methode findViewById(R.id.id_des_Buttons) holen kannst. Diesem Button Objekt weißt du einen neuen onClickListner, welcher bei einem Klick ausgelöst wird, mithilfe der setOnClickListener Methode zu. In diesem onClickListener gibst du dann die auszuführende Aktion an.

FloatingActionButton

Der FloatingActionButton wurde damals mit dem MaterialDesign in Android 5 eingeführt und stellt eine besonders hervorgehobene Aktion, welche mit einem Icon ausgedrückt wird, dar. Für die genauen Details kannst du dich gerne in den Material Guidelines von Google über den FloatingActionButton informieren: https://material.io/guidelines/components/buttons-floating-action-button.html.

Es gibt zwei Arten des FloatingActionButtons:

normale Größe: Diese wird in den meisten Fällen genutzt

mini Größe: Diese wird nur selten genutzt

Um einen FloatingActionButton nutzen zu können musst du in deiner „build.gradle“ unter dem Punkt „dependencies“ folgende Zeile einfügen:

Nachdem du dies getan hast, kannst du einen FloatingActionButton in deine Layoutdatei einfügen:

Auf einen Klick reagieren

Um auf einen Klick des FloatingActionButtons zu reagieren, stehen dir die gleichen zwei Methoden, wie bei einem Normalen Button zur Verfügung:

oder

Switch

Um deinen Nutzer zwischen zwei Optionen wählen zu lassen, gibt es in Android einen sogenannten Switch. Dieser Switch kann zwischen zwei Zuständen „an“ und „aus“ wechseln und somit eine gewählte Option anzeigen.

Mit dem Attribut android:text gibst du an, welcher Text neben dem Switch stehen soll. Dieser Text dient zur Beschreibung des Switches.

Der onCheckedChangeListener

Mit dem onCheckedChangeListener kannst du, wie mit dem onClickListener bei einem Button, auf Nutzer Interaktion reagieren. Dieser Listener wird nicht nur einfach bei einer Veränderung ausgelöst, sondern liefert dir zusätzlich einen Boolean-Wert (Wahrheitswert), welcher den Zustand des Switches widerspiegelt, zurück. Mit einer if-Abfrage kannst du nun diesen Wert überprüfen und dann die passenden Aktionen auslösen.

EditText und TextInputLayout

Zur Texteingabe wir in Android das EditText verwendet. Mit dem EditText bietest du deinem Nutzer die Möglichkeit, eine Texteingabe zu tätigen.

  • android:ems
    • gibt an, wie oft der Buchstabe ‘M’ in das Textfeld passt. Hierbei ist jedoch android:layout_width=”wrap_content” vorausgesetzt.
  • android:inputType
    • Legt fest, welche Art von Text in das EditText geschrieben werden kann. Ausgehend von diesem Parameter wird deinem Nutzer die passende Softwaretastatur eingeblendet.
  • android:text
    • Gibt an, welcher Text im EditText steht.
  • android:hint
    • Mit diesem Parameter hast du die Möglichkeit deinen Nutzer auf den Inhalt des EditTextes hinzuweisen

Den Text eines EditTextes auslesen

Um den Text des EditTextes auslesen zu können benötigst du zuerst eine Referenz auf das passende Layout-Element. Dies bekommst du wie gewohnt mit der Methode findViewById(R.id.id_des_EditTextes). Mit der Methode getText() bekommst du nun von diesem Objekt den passenden Text in Form eines Editable zurück. Von diesem Editable holst du dir mit der Methode toString() den passenden String. Mit diesem String kannst du nun weiterarbeiten.

TextInputLayout und TextInputEditText

Um den Design-Anforderungen des Material Designs bezüglich des Textfeldes (https://material.io/guidelines/components/text-fields.html#text-fields-layout) gerecht zu werden, wurde das TextInputLayout und TextInputEditText eingeführt.

Um diese beiden Elemente nutzen zu können musst du, wie bereits beim FloatingActionButton, einen Eintrag im „dependencies“ Bereich deiner “build.gradle” Datei hinzufügen:

Nachdem du dies getan hast, kannst du wie gewohnt den passenden Code in deine Layout-Datei einfügen:

Das TextInputEditText verhält sich im Großen und Ganzen wie ein gewöhnliches EditText und kann daher auch mit den gleichen Attributen ergänzt werden.

TextView

Um Text in Android anzuzeigen, verwendet man das TextView.

  • android:text
    • Gibt an, welcher Text angezeigt werden soll
  • android:textAppearance
    • Legt die äußere Erscheinung des TextViews fest.

Text per Java festlegen

In vielen Fällen möchtest du mit deinem TextView next anzeigicht nur statischen Ten, sondern auch Ergebnisse darstellen. Dafür benötigst du eine Referenz, welche du mit der findViewById(R.id.id_des_TextViews) Methode bekommst, auf das TextView. Von dieser Referenz aus kannst du mit der setText(„Text“) Methode den Text festlegen.

ImageView

Mit dem ImageView hast du die Möglichkeit, Bilddateien in deiner App anzeigen zu können.

  • android:srcCompat oder auch android:src
    • Gibt die Bildquelle an.

Wie geht es nun weiter?

Nun hast du die wichtigsten Android Layout-Elemente kennengelernt. Um nun großartige Benutzeroberflächen zu erstellen, brauchst du aber auch noch ein passendes Layout, welches die Layout-Elemente auf eine bestimmte Weise anordnet. Daher möchte ich dir im nächsten Teil die wichtigsten Android Layouts vorstellen.

Link zum Beitrag: Die wichtigsten Android Layouts

Das könnte dich auch interessieren...