RelativeLayout es uno de los Layouts que se utiliza para crear nuestras aplicaciones móviles con Android, es un grupo de vistas que muestra vistas secundarias en posiciones relativas. La posición de cada vista se especifica en relación con otros elementos dentro del Layout (como a la izquierda o debajo vista) o en relaciones relativas al padre o área del mismo RelativeLayout (parent RelativeLayout).

Permite realizar un diseño en donde las posiciones de las vistas hijas pueden ser de acuerdo a la relación relativa con las vistas padres. Hay que tener en cuenta que no se puede tener una dependencia circular entre el tamaño del RelativeLayout y la posición de sus hijos. Por ejemplo, no se puede tener un RelativeLayout cuya altura se establece en WRAP_CONTENT (ocupar todo el contenido) y un conjunto secundario en ALIGN_PARENT_BOTTOM (Alineado a la altura del padre).

Posicionando las Vistas

Como ya indicamos este Layout permite que las vistas secundarias especifiquen su posición en relación con la vista principal o entre sí (especificada por el ID). No permite alinear dos elementos por el borde derecho, o hacer uno por debajo de otro, centrado en la pantalla, centrado a la izquierda, y así sucesivamente.

De forma predeterminada, todas las vistas secundarias se dibujan en la parte superior izquierda del diseño, por lo que debe definir la posición de cada vista utilizando las diversas propiedades de diseño disponibles en RelativeLayout.LayoutParams.

A continuación definimos algunas de las propiedades disponibles en la vista de diseño:

android:layout_alignParentTop

Si es verdadero (true), hacer que el borde superior de esta vista coincida con el borde superior del padre.

android:layout_centerVertical

Si es verdadero (true), centra a esta vista verticalmente dentro de su padre.

android:layout_below

Posiciona el borde superior de esta vista debajo de la vista especificada con un ID de recurso.

android:layout_toRightOf

Posiciona el borde izquierdo de esta vista a la derecha de la vista especificada con un ID de recurso.

Ejemplo RelativeLayout

A continuación revisamos un ejemplo para entender mejor la aplicación de un RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Recordatorio" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="Aceptar" />
</RelativeLayout>

Como podemos apreciar tanto el alto y ancho de nuestro RelativeLayout se definen en match_parent, en la siguiente vista tenemos un EditText que tiene las propiedades layout_width=”match_parent” y layout_height=”wrap_content”, quiere decir que la vista en cuanto al ancho va a ocupar todo el ancho del padre (del RelativeLayout) y en cuanto al alto, va a ocupar el valor de su contenido.

El segundo y tercer elemento son dos Spinner, que para ser alineados podemos ver sus propiedades layout_alignParentLeft = “true”, y layout_toLeftOf = “@id/times” para el caso del primer Spinner, que indica que va a estar alineado a la izquierda del padre (RelativeLayout) y a la izquierda del otro Spinner que tiene el id times, para el caso del segundo Spinner vasta con tan sólo colocar la propiedad layout_alignParentRight = “true”, para que este se encuentre alineado a la derecha del padre (RelativeLayout).

Para el caso del botón indicamos la alineación a la derecha del Layout con la propiedad layout_alignParentRight = “true” similar al último Spinner.

Con este ejemplo tenemos el siguiente resultado en el diseño de nuestra actividad:

Si deseas saber más sobre el manejo de los RelativeLayout no olvides visitar la documentación oficial.

Recuerda que puedes saber más sobre el manejo de los Layouts en nuestro curso de Android – Introducción al Desarrollo de una App, que desde nuestro sitio tienes acceso con DESCUENTO.

Sí te gusto la información no olvides difundirla, para ello puedes compartirlo en tus redes sociales.