RelativeLayout — istota, zasady układu w aplikacjach Android

Czym jest RelativeLayout?

RelativeLayout — ViewGroup, która pojawiła się w Android SDK od API Level 1, pozycjonująca elementy potomne poprzez deklaratywne reguły (layout rules) względem rodzica lub innych elementów potomnych. Każda reguła jest określana przez atrybut XML, taki jak android:layout_above, android:layout_below, android:layout_toLeftOf z wartością ID docelowego elementu.

Przed pojawieniem się RelativeLayout programiści byli zmuszeni do używania zagnieżdżonych LinearLayout dla każdego niestandardowego pozycjonowania — prowadziło to do głębokiego zagnieżdżania i powolnego renderowania. RelativeLayout rozwiązał ten problem, oferując względne pozycjonowanie na jednym poziomie hierarchii. Jednak jego elastyczność jest ograniczona w porównaniu do nowoczesnego ConstraintLayout: RelativeLayout nie obsługuje łańcuchów, barier, prowadnic ani rozmiarów procentowych.

RelativeLayout ma dwie kluczowe cechy: jeden przebieg onMeasure (w przeciwieństwie do LinearLayout z weight, wymagającym dwóch przebiegów) oraz zależność od kolejności deklaracji — jeśli element A odwołuje się do elementu B, a B jest zadeklarowany po A, B musi mieć znany rozmiar w momencie pomiaru A. Według Android Developers Guide (2024), RelativeLayout wykonuje pomiar w jednym przebiegu, jeśli wszystkie reguły odwołują się do już zmierzonych elementów. W przeciwnym razie wymagany jest drugi przebieg, co obniża wydajność.

Kiedy potrzebny jest RelativeLayout

RelativeLayout jest uzasadniony w prostych układach z 3–7 elementami, gdzie wymagane jest względne pozycjonowanie (etykieta nad przyciskiem, ikona po prawej stronie tekstu, panel na dole ekranu). W nowych projektach zalecany jest ConstraintLayout, ale RelativeLayout jest nadal szeroko stosowany w legacy-kodzie i bibliotekach.

Zasady pozycjonowania: relative i align

RelativeLayout używa dwóch typów reguł: reguły relative (pozycjonowanie względem innego elementu) i reguły align (przypięcie do rodzica). Każdy element potomny może mieć nieograniczoną liczbę reguł, ale sprzeczne reguły (np. alignParentTop i below innego elementu) są rozstrzygane na korzyść ostatniej zadeklarowanej w atrybucie.

Reguły relative: - android:layout_above="@id/target" — dolna krawędź elementu jest przypięta do górnej krawędzi target. - android:layout_below="@id/target" — górna krawędź elementu jest przypięta do dolnej krawędzi target. - android:layout_toLeftOf="@id/target" — prawa krawędź jest przypięta do lewej krawędzi target. - android:layout_toRightOf="@id/target" — lewa krawędź jest przypięta do prawej krawędzi target. - android:layout_toStartOf="@id/target" — odpowiednik toLeftOf dla lokalizacji RTL. - android:layout_toEndOf="@id/target" — odpowiednik toRightOf dla RTL.

Reguły align (do rodzica): - android:layout_alignParentTop="true" — górna krawędź elementu pokrywa się z górną krawędzią rodzica. - android:layout_alignParentBottom="true" — dolna krawędź pokrywa się z dolną krawędzią rodzica. - android:layout_alignParentLeft="true" — lewa krawędź pokrywa się z lewą krawędzią rodzica. - android:layout_alignParentRight="true" — prawa krawędź pokrywa się z prawą krawędzią rodzica. - android:layout_alignParentStart i android:layout_alignParentEnd — dla RTL.

Reguły align do innych elementów: - android:layout_alignTop="@id/target" — góra elementu pokrywa się z górą target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — analogicznie. - android:layout_alignBaseline="@id/target" — wyrównanie do linii bazowej tekstu (przydatne dla wierszy z różnymi rozmiarami czcionki).

Centrowanie i kolejność nakładania

Centrowanie w RelativeLayout jest określane przez trzy atrybuty: android:layout_centerInParent="true" (na środku rodzica na obu osiach), android:layout_centerHorizontal="true" (na środku poziomo) i android:layout_centerVertical="true" (na środku pionowo). Centrowanie jest zgodne z innymi regułami: element może być wyśrodkowany poziomo i jednocześnie przypięty do dolnej krawędzi rodzica.

Kolejność nakładania (Z-order) w RelativeLayout jest określana przez kolejność deklaracji elementów w XML. Pierwszy zadeklarowany element jest rysowany jako pierwszy (będzie niżej), ostatni — jako ostatni (będzie wyżej). Jeśli potrzebujesz zmienić kolejność nakładania bez zmiany XML, użyj android:elevation (od API 21) — elementy z wyższą elevation są rysowane na wierzchu. Dla wersji poniżej API 21 kolejność nakładania jest regulowana wyłącznie przez kolejność deklaracji.

Ważne: RelativeLayout nie obsługuje atrybutu android:elevation dla rodzica — każdy element zarządza swoją elevation samodzielnie. W przypadku konfliktu reguł pozycjonowania i elevation (np. nakładające się elementy) elevation ma priorytet przy rysowaniu, ale nie przy pozycjonowaniu — element z wyższą elevation może wizualnie nakładać się na inny, nawet jeśli jego reguły layoutu umieszczają go „z tyłu”.

Przykłady: układy XML z RelativeLayout

Przykład 1: Profil użytkownika

Awatar na środku u góry, imię pod awatarem, status pod imieniem, przycisk akcji na dole ekranu. Wszystkie elementy używają reguł relative do sekwencyjnego przypinania.

<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="Jan Kowalski"
        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="Edytuj profil" />

</RelativeLayout>

Awatar jest przypięty do góry przez marginTop + centerHorizontal, imię — pod awatarem przez layout_below, status — pod imieniem, przycisk — do dolnej krawędzi rodzica przez alignParentBottom. Wszystkie elementy są niezależne od siebie, nie ma łańcuchów ani zagnieżdżania.

Przykład 2: Panel z ikoną i znaczkiem

Ikona z czerwonym znaczkiem (kółko z liczbą) w prawym górnym rogu. Znaczek jest pozycjonowany względem ikony przez align do jej krawędzi z ujemnymi marginami dla nałożenia.

<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>

Znaczek jest przypięty do górnej i prawej krawędzi ikony. Ujemne marginesy (-6dp) przesuwają znaczek na zewnątrz, tworząc efekt nakładania się na krawędź ikony. Jest to popularny wzorzec dla powiadomień, który bez RelativeLayout wymagałby FrameLayout lub niestandardowego rysowania.

Przykład 3: Ekran logowania z RelativeLayout

Formularz logowania: logo na środku u góry, pole email pod nim, pole hasła pod emailem, przycisk „Zaloguj się” pod hasłem, link „Rejestracja” przypięty do dołu. Wszystkie elementy są sekwencyjnie przypięte przez layout_below.

<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="Hasło"
        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="Zaloguj się" />

    <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="Nie masz konta? Zarejestruj się"
        android:textColor="@color/primary" />

</RelativeLayout>

Ekran używa 5 elementów na jednym poziomie hierarchii. Przepływ od góry do dołu (logo → email → hasło → przycisk) jest zapewniony przez layout_below, a link jest przypięty do dołu przez alignParentBottom. Dla tej samej funkcjonalności LinearLayout wymagałby dwóch zagnieżdżonych kontenerów (jeden dla górnej grupy, drugi dla linku z weight).

RelativeLayout vs ConstraintLayout: porównanie

Porównanie dwóch ViewGroup do względnego pozycjonowania: RelativeLayout (klasyczny, API 1+) i ConstraintLayout (nowoczesny, Jetpack). Kryteria: elastyczność, wydajność, obsługa RTL i adaptacyjność.

RelativeLayout ustępuje ConstraintLayout praktycznie pod każdym względem, poza jednym: jest wbudowany w Android SDK od API 1 i nie wymaga dodatkowych zależności. Dla projektów, które nadal używają minSdk poniżej API 14 (Android 4.0), RelativeLayout jest jedynym standardowym rozwiązaniem względnego pozycjonowania. We wszystkich pozostałych przypadkach Google zaleca ConstraintLayout.