RelativeLayout (Java)

RelativeLayout arranges children relative to the parent or to other siblings. It’s great for small relational clusters such as an avatar + name row, a title with an action button, or compact info cards.

How the Key Rules Work (with Mental Model)

Rule	What It Does	Plain-English Mental Model	Common Use
android:layout_alignParentStart="true"	Pins the child’s start edge to the parent’s start edge (RTL-aware)	“Stick me to the beginning edge of my parent (left in LTR, right in RTL).”	Place avatars/icons flush to the leading side
android:layout_alignParentTop="true"	Pins the child’s top edge to the parent’s top edge	“Touch the top border of my parent.”	Anchoring a header/title at the top of the container
android:layout_toLeftOf="@id/other"	Places this child so its right edge does not cross the left edge of other (LTR-only semantic)	“Place me to the left side of that sibling.”	Keep text from going under a right-side button

Example 1 — Header with Right Action

We pin the title to the parent’s leading/top edges and keep it from overlapping the right button using layout_toLeftOf.

<!-- res/layout/header_actions.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="12dp">

    <Button
        android:id="@+id/btnAction"
        android:text="Edit"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"/>

    <TextView
        android:id="@+id/title"
        android:text="Profile"
        android:textStyle="bold"
        android:textSize="18sp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/btnAction"
        android:layout_marginEnd="8dp"/>

</RelativeLayout>

• layout_alignParentStart="true" → title’s leading edge flush with parent’s leading edge (RTL-safe).
• layout_alignParentTop="true" → title touches the top border of the parent.
• layout_toLeftOf="@id/btnAction" → title’s right side will stay left of the button’s left side (avoids overlap). For RTL, prefer layout_toStartOf.

Example 2 — Avatar + Name Row

<!-- res/layout/row_avatar_name.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:padding="8dp">

    <ImageView
        android:id="@+id/avatar"
        android:src="@drawable/ic_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"/>

    <TextView
        android:id="@+id/name"
        android:text="Sonu Kumar Pandit"
        android:textStyle="bold"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignTop="@id/avatar"
        android:layout_marginStart="12dp"/>

    <TextView
        android:text="Android Developer"
        android:layout_below="@id/name"
        android:layout_alignStart="@id/name"/>

</RelativeLayout>

Why it works: The avatar anchors to the start and vertical center. The name starts to the right of avatar. The subtitle simply stacks under name and aligns starts.

Example 3 — Title with Right Badge (prevent overlap)

<!-- res/layout/card_title_badge.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="12dp">

    <TextView
        android:id="@+id/title"
        android:text="Notifications"
        android:textStyle="bold"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/badge"
        android:layout_marginEnd="8dp"/>

    <TextView
        android:id="@+id/badge"
        android:text="12"
        android:background="@drawable/bg_badge_red"
        android:padding="6dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

Example 4 — Centered Empty State

<!-- res/layout/empty_state.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="220dp">

    <ImageView
        android:id="@+id/ivIcon"
        android:src="@drawable/ic_info"
        android:layout_centerInParent="true"/>

    <TextView
        android:text="No items yet"
        android:layout_below="@id/ivIcon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"/>

</RelativeLayout>

Rule Reference (Quick Table)

Category	Rules	Notes
Align to Parent	layout_alignParentStart|End|Top|Bottom="true"	Pin edges to the parent (Start/End are RTL-safe)
Align to Sibling	layout_alignStart|End|Top|Bottom="@id/..."	Match your edge to a sibling’s edge
Relative Position	layout_toRightOf|layout_toLeftOf|layout_above|layout_below="@id/..."	Place around a sibling (prefer Start/End over Left/Right)
Centering	layout_centerInParent|layout_centerHorizontal|layout_centerVertical="true"	Quick centering helpers
Baseline	layout_alignBaseline="@id/..."	Align text baselines across controls

Common Pitfalls & Fixes

Hands-On Practice

1. Modify Example 1: replace layout_toLeftOf with layout_toStartOf and test in RTL emulator.
2. Add a subtitle under the title in Example 1 with layout_below and layout_alignStart.
3. In Example 2, add a “More” icon aligned to parent end and ensure the subtitle doesn’t overlap (use layout_toLeftOf/toStartOf).