RelativeLayout — essence, layout rules in Android applications

What is RelativeLayout?

RelativeLayout — a ViewGroup introduced in Android SDK starting from API Level 1, which positions child elements through declarative rules (layout rules) relative to the parent or other child elements. Each rule is set via an XML attribute such as android:layout_above, android:layout_below, android:layout_toLeftOf with the value of the target element's ID.

Before RelativeLayout appeared, developers had to use nested LinearLayout for every non-standard positioning — this led to deep nesting and slow rendering. RelativeLayout solved this problem by offering relative positioning at a single hierarchy level. However, its flexibility is limited compared to modern ConstraintLayout: RelativeLayout does not support chains, barriers, guidelines, or percentage-based dimensions.

RelativeLayout has two key features: a single onMeasure pass (unlike LinearLayout with weight, which requires two passes) and dependency on declaration order — if element A references element B, and B is declared after A, B must have a known size at the time of A's measurement. According to the Android Developers Guide (2024), RelativeLayout performs measurement in a single pass if all rules reference already measured elements. Otherwise, a second pass is required, which reduces performance.

When RelativeLayout is needed

RelativeLayout is justified for simple layouts with 3–7 elements where relative positioning is required (label above a button, icon to the right of text, panel at the bottom of the screen). For new projects, ConstraintLayout is recommended, but RelativeLayout is still widely used in legacy code and libraries.

Positioning rules: relative and align

RelativeLayout uses two types of rules: relative rules (positioning relative to another element) and align rules (anchoring to the parent). Each child element can have an unlimited number of rules, but conflicting rules (e.g., alignParentTop and below another element) are resolved in favor of the last declared attribute.

Relative rules: - android:layout_above="@id/target" — the bottom edge of the element is anchored to the top edge of target. - android:layout_below="@id/target" — the top edge of the element is anchored to the bottom edge of target. - android:layout_toLeftOf="@id/target" — the right edge is anchored to the left edge of target. - android:layout_toRightOf="@id/target" — the left edge is anchored to the right edge of target. - android:layout_toStartOf="@id/target" — analogous to toLeftOf for RTL locales. - android:layout_toEndOf="@id/target" — analogous to toRightOf for RTL.

Align rules (to parent): - android:layout_alignParentTop="true" — the top edge of the element coincides with the top edge of the parent. - android:layout_alignParentBottom="true" — the bottom edge coincides with the bottom edge of the parent. - android:layout_alignParentLeft="true" — the left edge coincides with the left edge of the parent. - android:layout_alignParentRight="true" — the right edge coincides with the right edge of the parent. - android:layout_alignParentStart and android:layout_alignParentEnd — for RTL.

Align rules to other elements: - android:layout_alignTop="@id/target" — the top of the element coincides with the top of target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — analogous. - android:layout_alignBaseline="@id/target" — alignment by text baseline (useful for strings with different font sizes).

Centering and Z-order

Centering in RelativeLayout is set by three attributes: android:layout_centerInParent="true" (center of the parent on both axes), android:layout_centerHorizontal="true" (center horizontally), and android:layout_centerVertical="true" (center vertically). Centering is compatible with other rules: an element can be centered horizontally while being anchored to the bottom edge of the parent.

Z-order (overlay order) in RelativeLayout is determined by the order of element declaration in XML. The first declared element is drawn first (will be below), the last — last (will be above). If you need to change the overlay order without changing XML, use android:elevation (starting from API 21) — elements with higher elevation are drawn on top. For versions below API 21, the overlay order is controlled only by the declaration order.

Important: RelativeLayout does not support the android:elevation attribute for the parent — each element controls its own elevation. When positioning rules and elevation conflict (e.g., overlapping elements), elevation takes priority for rendering, but not for positioning — an element with higher elevation can visually overlap another, even if its layout rules place it "behind".

Examples: XML layouts with RelativeLayout

Example 1: User profile

Avatar centered at the top, name below the avatar, status below the name, action button at the bottom of the screen. All elements use relative rules for sequential anchoring.

<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="Ivan Ivanov"
        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="Edit profile" />

</RelativeLayout>

The avatar is anchored to the top via marginTop + centerHorizontal, the name is below the avatar via layout_below, the status is below the name, and the button is anchored to the bottom edge of the parent via alignParentBottom. All elements are independent of each other — no chains or nesting.

Example 2: Panel with icon and badge

An icon with a red badge (circle with number) in the top right corner. The badge is positioned relative to the icon via alignment to its edges with negative margins for overlap.

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

The badge is anchored to the top and right edges of the icon. Negative margins (-6dp) shift the badge outward, creating an effect of overlapping the icon's border. This is a popular pattern for notifications, which without RelativeLayout would require FrameLayout or custom drawing.

Example 3: Login screen with RelativeLayout

Login form: logo centered at the top, email field below it, password field below email, "Login" button below password, "Register" link anchored to the bottom. All elements are sequentially anchored via 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="Password"
        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="Login" />

    <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="No account? Register"
        android:textColor="@color/primary" />

</RelativeLayout>

The screen uses 5 elements at a single hierarchy level. The top-to-bottom flow (logo → email → password → button) is achieved via layout_below, and the link is pushed to the bottom via alignParentBottom. For the same functionality, LinearLayout would require two nested containers (one for the top group, another for the link with weight).

RelativeLayout vs ConstraintLayout: comparison

Comparison of two ViewGroups for relative positioning: RelativeLayout (classic, API 1+) and ConstraintLayout (modern, Jetpack). Criteria: flexibility, performance, RTL support, and adaptability.

RelativeLayout is inferior to ConstraintLayout in almost every aspect except one: it is built into Android SDK from API 1 and requires no additional dependencies. For projects that still use minSdk below API 14 (Android 4.0), RelativeLayout is the only standard option for relative positioning. In all other cases, Google recommends ConstraintLayout.