Android RelativeLayout Example – Setup and Usage

RelativeLayout is a legacy but still useful view group in Android that allows you to position UI elements relative to one another or the parent container. It provides a flexible way to define UI relationships without deeply nested layouts.

This guide explains how to implement RelativeLayout accurately, with practical use cases and code examples.

What Is RelativeLayout?

RelativeLayout arranges child views based on their relative positions: above, below, left, right, or centered relative to the parent or other sibling views. It was widely used prior to ConstraintLayout, and while ConstraintLayout is preferred for complex UIs, RelativeLayout remains useful for simpler relational layouts.

When to Use RelativeLayout

Use RelativeLayout when:

• You need views positioned relative to each other
• The layout is relatively simple
• You want to reduce nesting compared to multiple LinearLayouts

For advanced constraints and responsive UI, prefer ConstraintLayout.

Basic RelativeLayout Example

Here’s a straightforward example placing two text views relative to each other:

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

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Header"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/tvSubtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Subheader"
        android:layout_below="@id/tvTitle"
        android:layout_marginTop="8dp"/>
</RelativeLayout>

How It Works

• tvSubtitle appears below tvTitle because of android:layout_below="@id/tvTitle"
• The relationship defines the vertical position.

Positioning Views Relative to Parent

Use parent rules to align views inside the container:

<Button
    android:id="@+id/btnTopRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Top Right"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"/>

This places a button at the top right corner of the parent.

Advanced Positioning with RelativeLayout Rules

Example:

<TextView
    android:id="@+id/tvNote"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Centered"
    android:layout_centerInParent="true"/>

This centers the view both horizontally and vertically.

RelativeLayout With Buttons

Combined positioning makes UIs more dynamic:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 1"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 2"
    android:layout_below="@id/button1"
    android:layout_alignParentEnd="true"
    android:layout_marginTop="12dp"/>

This places button2 below button1 and aligns it to the right.

RTL (Right-to-Left) Support

Modern Android supports RTL languages. Use start/end instead of left/right:

<TextView
    android:id="@+id/tvRtl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RTL Aware"
    android:layout_alignParentStart="true"/>

This ensures proper layout in languages that use right-to-left scripts.

Best Practices

From real Android development experience:

• Use ConstraintLayout for complex relationships
• Use RelativeLayout for simple relationships only
• Avoid deep nesting — keep layouts flat
• Prefer start/end over left/right for internationalization
• Use meaningful IDs to make relationship rules clear

These practices lead to cleaner and more maintainable UI code.

Performance Considerations

RelativeLayout measures child views multiple times — excessive use with many nested rules can affect performance. For complex UIs, ConstraintLayout is optimized with a flat hierarchy and better layout performance.

Common Issues and Fixes

Issue: Views overlap unexpectedly
➡ Ensure correct relation attributes and correct view IDs.

Issue: Layout not correct in RTL languages
➡ Replace left/right with start/end.

Issue: Layout performance is slow
➡ Consider migrating to ConstraintLayout.

Summary

RelativeLayout empowers you to position views relative to each other and the parent. It is most useful for simpler relational layouts and is still relevant in many legacy and simple UI designs. However, for modern and complex UI, ConstraintLayout remains the recommended choice.