RelativeLayout — Wesen, Layout-Regeln in Android-Anwendungen

Was ist RelativeLayout?

RelativeLayout — eine ViewGroup, die ab API Level 1 im Android SDK eingeführt wurde und Kind-Elemente durch deklarative Regeln (Layout-Regeln) relativ zum Elternteil oder zu anderen Kind-Elementen positioniert. Jede Regel wird durch ein XML-Attribut wie android:layout_above, android:layout_below, android:layout_toLeftOf mit dem Wert der ID des Zielelements festgelegt.

Vor RelativeLayout mussten Entwickler für jede nicht standardmäßige Positionierung verschachtelte LinearLayouts verwenden — dies führte zu tiefer Verschachtelung und langsamer Darstellung. RelativeLayout löste dieses Problem, indem es relative Positionierung auf einer einzelnen Hierarchieebene bot. Seine Flexibilität ist jedoch im Vergleich zum modernen ConstraintLayout eingeschränkt: RelativeLayout unterstützt keine Ketten, Barrieren, Hilfslinien oder prozentuale Größen.

RelativeLayout hat zwei Hauptmerkmale: einen einzigen onMeasure-Durchlauf (im Gegensatz zu LinearLayout mit weight, das zwei Durchläufe benötigt) und Abhängigkeit von der Deklarationsreihenfolge — wenn Element A auf Element B verweist und B nach A deklariert wird, muss B zum Zeitpunkt der Messung von A eine bekannte Größe haben. Laut Android Developers Guide (2024) führt RelativeLayout die Messung in einem Durchlauf durch, wenn alle Regeln auf bereits gemessene Elemente verweisen. Andernfalls ist ein zweiter Durchlauf erforderlich, was die Leistung beeinträchtigt.

Wann RelativeLayout benötigt wird

RelativeLayout ist für einfache Layouts mit 3–7 Elementen sinnvoll, bei denen relative Positionierung erforderlich ist (Label über einem Button, Icon rechts von Text, Panel am unteren Bildschirmrand). Für neue Projekte wird ConstraintLayout empfohlen, aber RelativeLayout wird immer noch häufig in Legacy-Code und Bibliotheken verwendet.

Positionierungsregeln: relative und align

RelativeLayout verwendet zwei Arten von Regeln: relative Regeln (Positionierung relativ zu einem anderen Element) und align Regeln (Verankerung am Elternteil). Jedes Kind-Element kann eine unbegrenzte Anzahl von Regeln haben, aber widersprüchliche Regeln (z.B. alignParentTop und below eines anderen Elements) werden zugunsten des zuletzt deklarierten Attributs aufgelöst.

Relative Regeln: - android:layout_above="@id/target" — die Unterkante des Elements wird an der Oberkante von target verankert. - android:layout_below="@id/target" — die Oberkante des Elements wird an der Unterkante von target verankert. - android:layout_toLeftOf="@id/target" — die rechte Kante wird an der linken Kante von target verankert. - android:layout_toRightOf="@id/target" — die linke Kante wird an der rechten Kante von target verankert. - android:layout_toStartOf="@id/target" — analog zu toLeftOf für RTL-Gebietsschemata. - android:layout_toEndOf="@id/target" — analog zu toRightOf für RTL.

Align Regeln (zum Elternteil): - android:layout_alignParentTop="true" — die Oberkante des Elements stimmt mit der Oberkante des Elternteils überein. - android:layout_alignParentBottom="true" — die Unterkante stimmt mit der Unterkante des Elternteils überein. - android:layout_alignParentLeft="true" — die linke Kante stimmt mit der linken Kante des Elternteils überein. - android:layout_alignParentRight="true" — die rechte Kante stimmt mit der rechten Kante des Elternteils überein. - android:layout_alignParentStart und android:layout_alignParentEnd — für RTL.

Align Regeln zu anderen Elementen: - android:layout_alignTop="@id/target" — die Oberseite des Elements stimmt mit der Oberseite von target überein. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — analog. - android:layout_alignBaseline="@id/target" — Ausrichtung an der Textgrundlinie (nützlich für Zeichenfolgen mit unterschiedlichen Schriftgrößen).

Zentrierung und Z-Reihenfolge

Die Zentrierung in RelativeLayout wird durch drei Attribute festgelegt: android:layout_centerInParent="true" (Mitte des Elternteils auf beiden Achsen), android:layout_centerHorizontal="true" (horizontal zentrieren) und android:layout_centerVertical="true" (vertikal zentrieren). Die Zentrierung ist mit anderen Regeln kompatibel: Ein Element kann horizontal zentriert und gleichzeitig an der Unterkante des Elternteils verankert sein.

Die Z-Reihenfolge (Überlagerungsreihenfolge) in RelativeLayout wird durch die Reihenfolge der Elementdeklaration in XML bestimmt. Das zuerst deklarierte Element wird zuerst gezeichnet (liegt unten), das letzte — zuletzt (liegt oben). Wenn Sie die Überlagerungsreihenfolge ohne Änderung des XML ändern müssen, verwenden Sie android:elevation (ab API 21) — Elemente mit höherer elevation werden oben gezeichnet. Für Versionen unter API 21 wird die Überlagerungsreihenfolge nur durch die Deklarationsreihenfolge gesteuert.

Wichtig: RelativeLayout unterstützt das Attribut android:elevation nicht für das Elternteil — jedes Element steuert seine eigene elevation. Wenn Positionierungsregeln und elevation in Konflikt geraten (z.B. überlappende Elemente), hat elevation beim Rendern Vorrang, jedoch nicht bei der Positionierung — ein Element mit höherer elevation kann ein anderes visuell überlagern, selbst wenn seine Layout-Regeln es „hinten" platzieren.

Beispiele: XML-Layouts mit RelativeLayout

Beispiel 1: Benutzerprofil

Avatar oben zentriert, Name unter dem Avatar, Status unter dem Namen, Aktionsbutton am unteren Bildschirmrand. Alle Elemente verwenden relative Regeln zur sequenziellen Verankerung.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:src="@drawable/avatar_placeholder" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/avatar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="Iwan Iwanow"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/user_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_name"
        android:layout_centerHorizontal="true"
        android:text="Online"
        android:textColor="@color/green" />

    <Button
        android:id="@+id/edit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="Profil bearbeiten" />

</RelativeLayout>

Der Avatar ist über marginTop + centerHorizontal oben verankert, der Name ist über layout_below unter dem Avatar, der Status unter dem Namen und der Button über alignParentBottom an der Unterkante des Elternteils verankert. Alle Elemente sind voneinander unabhängig — keine Ketten oder Verschachtelung.

Beispiel 2: Panel mit Icon und Badge

Ein Icon mit einem roten Badge (Kreis mit Zahl) in der oberen rechten Ecke. Der Badge wird relativ zum Icon durch Ausrichtung an seinen Kanten mit negativen Abständen zur Überlappung positioniert.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignTop="@+id/icon"
        android:layout_alignRight="@+id/icon"
        android:layout_marginTop="-6dp"
        android:layout_marginRight="-6dp"
        android:gravity="center"
        android:background="@drawable/badge_background"
        android:text="3"
        android:textColor="@android:color/white"
        android:textSize="10sp" />

</RelativeLayout>

Der Badge ist an der oberen und rechten Kante des Icons verankert. Negative Abstände (-6dp) verschieben den Badge nach außen und erzeugen einen Überlappungseffekt der Icon-Grenze. Dies ist ein beliebtes Muster für Benachrichtigungen, das ohne RelativeLayout FrameLayout oder benutzerdefinierte Zeichnung erfordern würde.

Beispiel 3: Anmeldebildschirm mit RelativeLayout

Anmeldeformular: Logo oben zentriert, E-Mail-Feld darunter, Passwortfeld unter der E-Mail, „Anmelden"-Button unter dem Passwort, „Registrieren"-Link am unteren Rand verankert. Alle Elemente sind sequenziell über layout_below verankert.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <TextView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="MyApp"
        android:textSize="32sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logo"
        android:layout_marginTop="32dp"
        android:hint="Email" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email_input"
        android:layout_marginTop="16dp"
        android:hint="Passwort"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginTop="24dp"
        android:text="Anmelden" />

    <TextView
        android:id="@+id/register_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="Kein Konto? Registrieren"
        android:textColor="@color/primary" />

</RelativeLayout>

Der Bildschirm verwendet 5 Elemente auf einer einzigen Hierarchieebene. Der Fluss von oben nach unten (Logo → E-Mail → Passwort → Button) wird über layout_below erreicht, und der Link wird über alignParentBottom nach unten gedrückt. Für die gleiche Funktionalität würde LinearLayout zwei verschachtelte Container erfordern (einen für die obere Gruppe, einen für den Link mit weight).

RelativeLayout vs ConstraintLayout: Vergleich

Vergleich zweier ViewGroups für relative Positionierung: RelativeLayout (klassisch, API 1+) und ConstraintLayout (modern, Jetpack). Kriterien: Flexibilität, Leistung, RTL-Unterstützung und Anpassungsfähigkeit.

RelativeLayout ist in fast jeder Hinsicht ConstraintLayout unterlegen, bis auf einen Punkt: es ist ab API 1 in das Android SDK integriert und erfordert keine zusätzlichen Abhängigkeiten. Für Projekte, die noch minSdk unter API 14 (Android 4.0) verwenden, ist RelativeLayout die einzige Standardoption für relative Positionierung. In allen anderen Fällen empfiehlt Google ConstraintLayout.