RelativeLayout — esencia, reglas de diseño en aplicaciones Android

¿Qué es RelativeLayout?

RelativeLayout — un ViewGroup introducido en Android SDK desde API Level 1, que posiciona elementos secundarios mediante reglas declarativas (layout rules) con respecto al padre u otros elementos secundarios. Cada regla se define mediante un atributo XML como android:layout_above, android:layout_below, android:layout_toLeftOf con el valor del ID del elemento objetivo.

Antes de la aparición de RelativeLayout, los desarrolladores tenían que usar LinearLayout anidados para cada posicionamiento no estándar — esto provocaba una anidación profunda y una renderización lenta. RelativeLayout resolvió este problema ofreciendo posicionamiento relativo en un solo nivel de jerarquía. Sin embargo, su flexibilidad es limitada en comparación con ConstraintLayout moderno: RelativeLayout no soporta cadenas, barreras, guías ni dimensiones porcentuales.

RelativeLayout tiene dos características clave: una sola pasada onMeasure (a diferencia de LinearLayout con weight, que requiere dos pasadas) y dependencia del orden de declaración — si el elemento A referencia al elemento B, y B se declara después de A, B debe tener un tamaño conocido en el momento de la medición de A. Según la Guía para desarrolladores de Android (2024), RelativeLayout realiza la medición en una sola pasada si todas las reglas referencian elementos ya medidos. De lo contrario, se requiere una segunda pasada, lo que reduce el rendimiento.

Cuándo se necesita RelativeLayout

RelativeLayout está justificado para diseños simples con 3–7 elementos donde se requiere posicionamiento relativo (etiqueta sobre un botón, icono a la derecha del texto, panel en la parte inferior de la pantalla). Para proyectos nuevos, se recomienda ConstraintLayout, pero RelativeLayout todavía se usa ampliamente en código heredado y bibliotecas.

Reglas de posicionamiento: relative y align

RelativeLayout usa dos tipos de reglas: reglas relative (posicionamiento relativo a otro elemento) y reglas align (anclaje al padre). Cada elemento secundario puede tener un número ilimitado de reglas, pero las reglas conflictivas (ej., alignParentTop y below de otro elemento) se resuelven a favor del último atributo declarado.

Reglas relative: - android:layout_above="@id/target" — el borde inferior del elemento está anclado al borde superior de target. - android:layout_below="@id/target" — el borde superior del elemento está anclado al borde inferior de target. - android:layout_toLeftOf="@id/target" — el borde derecho está anclado al borde izquierdo de target. - android:layout_toRightOf="@id/target" — el borde izquierdo está anclado al borde derecho de target. - android:layout_toStartOf="@id/target" — análogo a toLeftOf para localizaciones RTL. - android:layout_toEndOf="@id/target" — análogo a toRightOf para RTL.

Reglas align (al padre): - android:layout_alignParentTop="true" — el borde superior del elemento coincide con el borde superior del padre. - android:layout_alignParentBottom="true" — el borde inferior coincide con el borde inferior del padre. - android:layout_alignParentLeft="true" — el borde izquierdo coincide con el borde izquierdo del padre. - android:layout_alignParentRight="true" — el borde derecho coincide con el borde derecho del padre. - android:layout_alignParentStart y android:layout_alignParentEnd — para RTL.

Reglas align a otros elementos: - android:layout_alignTop="@id/target" — la parte superior del elemento coincide con la parte superior de target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — análogo. - android:layout_alignBaseline="@id/target" — alineación por línea base del texto (útil para cadenas con diferentes tamaños de fuente).

Centrado y orden Z

El centrado en RelativeLayout se define mediante tres atributos: android:layout_centerInParent="true" (centro del padre en ambos ejes), android:layout_centerHorizontal="true" (centro horizontal) y android:layout_centerVertical="true" (centro vertical). El centrado es compatible con otras reglas: un elemento puede estar centrado horizontalmente y anclado al borde inferior del padre.

El orden Z (orden de superposición) en RelativeLayout se determina por el orden de declaración de los elementos en XML. El primer elemento declarado se dibuja primero (estará debajo), el último — último (estará arriba). Si necesita cambiar el orden de superposición sin cambiar XML, use android:elevation (a partir de API 21) — los elementos con mayor elevation se dibujan encima. Para versiones inferiores a API 21, el orden de superposición se controla solo por el orden de declaración.

Importante: RelativeLayout no soporta el atributo android:elevation para el padre — cada elemento controla su propia elevation. Cuando las reglas de posicionamiento y elevation entran en conflicto (ej., elementos superpuestos), elevation tiene prioridad para la representación, pero no para el posicionamiento — un elemento con mayor elevation puede superponerse visualmente a otro, incluso si sus reglas de diseño lo colocan "detrás".

Ejemplos: diseños XML con RelativeLayout

Ejemplo 1: Perfil de usuario

Avatar centrado en la parte superior, nombre debajo del avatar, estado debajo del nombre, botón de acción en la parte inferior de la pantalla. Todos los elementos usan reglas relativas para anclaje secuencial.

<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="Iván 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="En línea"
        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="Editar perfil" />

</RelativeLayout>

El avatar está anclado a la parte superior mediante marginTop + centerHorizontal, el nombre está debajo del avatar mediante layout_below, el estado debajo del nombre y el botón anclado al borde inferior del padre mediante alignParentBottom. Todos los elementos son independientes entre sí — no hay cadenas ni anidación.

Ejemplo 2: Panel con icono y distintivo

Un icono con un distintivo rojo (círculo con número) en la esquina superior derecha. El distintivo se posiciona con respecto al icono mediante alineación a sus bordes con márgenes negativos para superposición.

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

El distintivo está anclado a los bordes superior y derecho del icono. Los márgenes negativos (-6dp) desplazan el distintivo hacia afuera, creando un efecto de superposición del borde del icono. Este es un patrón popular para notificaciones, que sin RelativeLayout requeriría FrameLayout o dibujo personalizado.

Ejemplo 3: Pantalla de inicio de sesión con RelativeLayout

Formulario de inicio de sesión: logotipo centrado en la parte superior, campo de correo debajo, campo de contraseña debajo del correo, botón "Iniciar sesión" debajo de la contraseña, enlace "Registrarse" anclado a la parte inferior. Todos los elementos están anclados secuencialmente mediante 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="Contraseña"
        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="Iniciar sesión" />

    <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 tienes cuenta? Registrarse"
        android:textColor="@color/primary" />

</RelativeLayout>

La pantalla usa 5 elementos en un solo nivel de jerarquía. El flujo de arriba a abajo (logo → correo → contraseña → botón) se logra mediante layout_below, y el enlace se empuja hacia abajo mediante alignParentBottom. Para la misma funcionalidad, LinearLayout requeriría dos contenedores anidados (uno para el grupo superior, otro para el enlace con weight).

RelativeLayout vs ConstraintLayout: comparación

Comparación de dos ViewGroups para posicionamiento relativo: RelativeLayout (clásico, API 1+) y ConstraintLayout (moderno, Jetpack). Criterios: flexibilidad, rendimiento, soporte RTL y adaptabilidad.

RelativeLayout es inferior a ConstraintLayout en casi todos los aspectos excepto uno: está integrado en Android SDK desde API 1 y no requiere dependencias adicionales. Para proyectos que aún usan minSdk inferior a API 14 (Android 4.0), RelativeLayout es la única opción estándar para posicionamiento relativo. En todos los demás casos, Google recomienda ConstraintLayout.