What Is RelativeLayout in Android? Complete Guide for Beginners

Newkings November 18, 2025

Android RelativeLayout: Complete Guide for Beginners

Android RelativeLayout is a classic layout manager that lets you position views relative to each other or to the parent container, giving you a lot of control for building clean, well‑structured UIs. It’s especially useful for simple forms, headers, and screens where elements depend on each other’s positions instead of a strict linear flow.

In this guide, you will learn what RelativeLayout is, how it works, its key attributes, and where it fits in modern Android development, with easy‑to‑understand code examples you can reuse in your own projects.


What Is RelativeLayout in Android?

RelativeLayout is a ViewGroup that arranges its child views based on their relationship to the parent or to other sibling views. Instead of placing each view in a strict row or column, you can say things like “put this button below that TextView” or “align this image to the right edge of the parent”.

This relative positioning makes it easier to build simple forms, login screens, profile headers, and similar UIs without needing a lot of nested containers. Each child view uses layout rules to define where it should appear on the screen.


How RelativeLayout Positions Views

In RelativeLayout, every child view can be positioned using special XML attributes. These attributes fall into two main categories:

  • Relative to the parent: align the view to the top, bottom, left, right, or center of the RelativeLayout.
  • Relative to other views: place the view above, below, to the left, to the right, or aligned with another view’s edges.

By combining a few of these attributes, you can precisely define where each view should appear without adding extra nested layouts, keeping your XML cleaner and easier to maintain.


Common RelativeLayout Attributes

Here are some of the most important and frequently used attributes in RelativeLayout:

  • android:layout_alignParentTop="true" – aligns the child to the top edge of the parent.
  • android:layout_alignParentBottom="true" – aligns the child to the bottom edge of the parent.
  • android:layout_alignParentStart="true" / android:layout_alignParentEnd="true" – aligns to the start or end edge (RTL‑aware).
  • android:layout_centerInParent="true" – centers the view both horizontally and vertically inside the parent.
  • android:layout_centerHorizontal="true" – centers the view horizontally within the parent.
  • android:layout_centerVertical="true" – centers the view vertically within the parent.
  • android:layout_below="@id/someView" – places the view below another view.
  • android:layout_above="@id/someView" – places the view above another view.
  • android:layout_toStartOf="@id/someView" / android:layout_toEndOf="@id/someView" – places the view to the start or end side of another view.
  • android:layout_alignStart="@id/someView" / android:layout_alignEnd="@id/someView" – aligns the start or end edge with another view.

You combine these attributes with standard properties like android:layout_width, android:layout_height, android:layout_margin, and padding to build complete layouts.


Basic RelativeLayout Example

The following example shows a simple RelativeLayout with a title centered at the top and a button placed below it: 

<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/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp" />

    <Button
        android:id="@+id/btnGetStarted"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Started"
        android:layout_below="@id/txtTitle"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="24dp" />

</RelativeLayout>

Here, the TextView is centered horizontally near the top of the screen, and the button is placed directly below that TextView and also centered horizontally. This demonstrates how intuitive relative positioning can be.


RelativeLayout Login Screen Example

RelativeLayout is also a great choice for creating small login screens where the elements are stacked with simple relationships. Here is a practical login screen layout using RelativeLayout: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp"
    android:background="#FFFFFF">

    <ImageView
        android:id="@+id/imgLogo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/settings_icon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:contentDescription="App Logo" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Welcome Back"
        android:textSize="22sp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_below="@id/imgLogo"
        android:layout_marginTop="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email or Username"
        app:boxBackgroundMode="outline"
        app:boxCornerRadiusTopStart="8dp"
        app:boxCornerRadiusTopEnd="8dp"
        android:layout_below="@id/tvTitle"
        android:layout_marginTop="20dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        app:endIconMode="password_toggle"
        app:boxBackgroundMode="outline"
        app:boxCornerRadiusTopStart="8dp"
        app:boxCornerRadiusTopEnd="8dp"
        android:layout_below="@id/tilEmail"
        android:layout_marginTop="12dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:id="@+id/tvForgot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Forgot password?"
        android:textSize="14sp"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/tilPassword"
        android:layout_marginTop="8dp" />

    <CheckBox
        android:id="@+id/chkRemember"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Remember me"
        android:layout_below="@id/tilPassword"
        android:layout_alignParentStart="true"
        android:layout_marginTop="8dp" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Log in"
        android:layout_below="@id/tvForgot"
        android:layout_marginTop="20dp"
        app:cornerRadius="8dp" />

    <TextView
        android:id="@+id/tvSignup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Don't have an account? Sign up"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="24dp" />

</RelativeLayout>

This login screen is created using RelativeLayout in Android, which allows UI elements to be positioned relative to each other. It is a simple, modern, and user-friendly login UI suitable for any Android application such as e-commerce, social media, banking, or educational apps. The design starts with a centered app logo, giving the interface a clean and professional look. Below the logo, a bold “Welcome Back” title is displayed to greet the user.

The login form includes two Material Design input fields:
  • Email or Username
  • Password with toggle visibility

These fields are created using TextInputLayout and TextInputEditText to maintain Material UI consistency.

A “Forgot Password?” link is aligned to the right, helping users quickly recover their accounts, while a “Remember me” checkbox appears on the left for easy login convenience. The Login button is implemented using MaterialButton with rounded corners, giving the design a modern and elevated look. Finally, at the bottom, a signup link encourages new users to create an account. This layout maintains proper spacing, clean alignment, and a minimal structure, making it both visually appealing and easy to use. Developers can customize the colors, styles, and icons to match their brand or theme. It’s a perfect example of a simple yet professional Android login screen using RelativeLayout.


Advantages of Using RelativeLayout

RelativeLayout offers several advantages, especially for beginners and small UI components:

  • Readable XML: Attributes like android:layout_below and android:layout_centerHorizontal are self‑describing and simple to follow.
  • Less nesting for simple UIs: For small forms and headers, you can often use a single RelativeLayout instead of nesting multiple LinearLayouts.
  • Good for form‑style layouts: Login screens, profile headers, and simple information cards can be put together quickly with relative positioning rules.

Because of these benefits, RelativeLayout remains a practical choice whenever your UI structure is relatively straightforward.


Limitations of RelativeLayout

As your screens grow more complex, some limitations of RelativeLayout start to appear:

  • Harder to manage for complex UIs: Many views depending on each other can make the XML difficult to understand and maintain.
  • Lack of advanced layout tools: RelativeLayout does not support chains, guidelines, or aspect ratios like ConstraintLayout does.
  • Encourages nesting with other layouts: For advanced behaviors, developers often nest RelativeLayouts and other ViewGroups, leading to deep hierarchies and potential performance issues.

Because of these drawbacks, complex, responsive layouts are usually better implemented using ConstraintLayout or a combination of more modern tools.


RelativeLayout vs ConstraintLayout (Quick View)

To understand where RelativeLayout fits today, it helps to compare it briefly with ConstraintLayout:

  • Use RelativeLayout when your layout is simple, mostly based on “above”, “below”, and “center” rules, and you want very readable XML.
  • Use ConstraintLayout when your screen is complex, needs flexibility across many screen sizes, or would otherwise require many nested layouts.

Knowing both layouts allows you to choose the right tool for each specific screen and keep your app’s UI both efficient and maintainable.


Best Practices for Using RelativeLayout

To get the best results with RelativeLayout, keep these best practices in mind:

  • Keep the number of child views reasonable so relative dependencies stay easy to track.
  • Use clear, descriptive IDs so each android:layout_below or android:layout_toEndOf reference is obvious.
  • Rely on margins instead of manual padding for spacing between related elements.
  • Use RelativeLayout for focused sections (like a small card or header) rather than huge, complex screens.

If you treat RelativeLayout as a tool for simple, self‑contained portions of your interface, it will help you create clean and understandable layouts.


Conclusion

Android RelativeLayout is a foundational layout manager that lets you position views relative to each other and to the parent using intuitive XML attributes. It shines in forms, headers, and other straightforward layouts where relative positioning is enough to describe the entire UI.

While ConstraintLayout is often preferred for large, complex, and highly responsive screens, RelativeLayout remains a valuable option in your Android UI toolbox. By understanding how and when to use it, you can write cleaner layouts, reduce unnecessary nesting, and maintain better control over your app’s user interface.

Tags

Post a Comment

0 Comments