Relative Layout

Explicación del concepto de Relative Layout

DEFINICIÓN

Hereda de ViewGroup.

RelativeLayout es un grupo de vistas que muestra vistas secundarias en posiciones relativas. La posición de cada vista puede especificarse como relativa a elementos del mismo nivel (como a la izquierda de otra vista o por debajo de ella) o en posiciones relativas al área RelativeLayout superior (como alineada a la parte inferior, izquierda o central).

USO DESDE XML

IMPORTANTE

Google recomienda el uso de Constraint Layout en exclusiva, sin embargo, se puede dar el caso de que un Relative Layout sea más sencillo de implementar y más útil.

Si utilizamos un Relative Layout sin darle ninguna posición relativa a los elementos que se encuentran en su interior, se alinearán todos en la esquina superior izquierda.

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RelativeLayoutActivity">
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/teal_700"/>
    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/teal_200"/>
</RelativeLayout>

ATRIBUTOS

Los atributos más importantes de un Relative Layout son los que se muestran en el enlace superior. Estos son los atributos de la clase RelativeLayout.LayoutParams y son fundamentales para indicar donde se posicionan las Views dentro del Layout.

Las tarjetas están copiada y traducida del enlace.

android:layout_above

Posiciona la View con su borde inferior sobre el borde superior de la View referenciada.

Esto lo hace en el eje Y, no en el X.

android:layout_alignBaseline

Posiciona la View con su Baseline a la altura de la Baseline de la View referenciada.

Solo funciona con TextViews.

android:layout_alignBottom

Posiciona la View con su borde inferior alineado con el borde inferior de la View referenciada.

Esto lo hace en el eje Y, no en el X.

android:layout_alignEnd

Posiciona la View con su borde final alineado con el borde final de la View referenciada.

En nuestra escritura es el derecho pero en otros casos como el hebreo puede ser el izquierdo. Esto lo hace en el eje X, no en el Y.

android:layout_alignLeft

Posiciona la View con su borde izquierdo alineado con el borde izquierdo de la View referenciada.

Esto lo hace en el eje X, no en el Y.

android:layout_alignParentBottom

Si es true, posiciona la View con su borde inferior alineado con el borde inferior del padre.

Esto lo hace en el eje Y, no en el X.

android:layout_alignParentEnd

Si es true, posiciona la View con su borde final alineado con el borde final del padre.

En nuestra escritura es el derecho pero en otros casos como el hebreo puede ser el izquierdo.

Esto lo hace en el eje X, no en el Y.

android:layout_alignParentLeft

Si es true, posiciona la View con su borde izquierdo alineado con el borde izquierdo del padre.

Esto lo hace en el eje X, no en el Y.

android:layout_alignParentRight

Si es true, posiciona la View con su borde derecho alineado con el borde derecho del padre. Esto lo hace en el eje X, no en el Y.

android:layout_alignParentStart

Si es true, posiciona la View con su borde inicial alineado con el borde inicial del padre.

En nuestra escritura es el izquierdo pero en otros casos como el hebreo puede ser el derecho.

Esto lo hace en el eje X, no en el Y.

android:layout_alignParentTop

Si es true, posiciona la View con su borde superior alineado con el borde superior del padre.

Esto lo hace en el eje Y, no en el X.

android:layout_alignRight

Posiciona la View con su borde derecho alineado con el borde derecho de la View referenciada.

Esto lo hace en el eje X, no en el Y.

android:layout_alignStart

Posiciona la View con su borde inicial alineado con el borde inicial de la View referenciada.

En nuestra escritura es el izquierdo pero en otros casos como el hebreo puede ser el derecho.

Esto lo hace en el eje X, no en el Y.

android:layout_alignTop

Posiciona la View con su borde superior sobre el borde superior de la View referenciada.

Esto lo hace en el eje Y, no en el X.

android:layout_alignWithParentIfMissing

Si es true, el padre es utilizado como referencia si la referencia no se puede encontrar.

android:layout_below

Posiciona la View con su borde superior bajo el borde inferior de la View referenciada.

Esto lo hace en el eje Y, no en el X.

android:layout_centerHorizontal

Si es true, se centra la View en el eje X respecto del padre.

android:layout_centerInParent

Si es true, se centra la View tanto en el eje X como en el eje Y respecto del padre.

android:layout_centerVertical

Si es true, se centra la View en el eje Y respecto del padre.

android:layout_toEndOf

Posiciona la View con su borde inicial junto a el borde final de la View referenciada. Esto lo hace en el eje X, no en el Y.

android:layout_toLeftOf

Posiciona la View con su borde derecho junto a el borde izquierdo de la View referenciada.

Esto lo hace en el eje X, no en el Y.

android:layout_toRightOf

Posiciona la View con su borde izquierdo junto a el borde derecho de la View referenciada.

Esto lo hace en el eje X, no en el Y.

android:layout_toStartOf

Posiciona la View con su borde final junto a el borde inicial de la View referenciada.

Esto lo hace en el eje X, no en el Y.

EJEMPLO

Vamos a utilizar Relative Layout para crear un Layout de una App con Views básicas.

Como vemos en la imagen de arriba, la App tiene una paleta de colores con tres colores principales que vamos a llamar:

primary
light_primary
dark_primary

La imagen es una muestra aproximada de como debe quedar el Layout, sin embargo, es muy dificil que quede exactamente así ya que con Relative Layout no se pueden utilizar los Weights como se ha hecho en Linear Layout.

El archivo de Layout queda como sigue:

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RelativeLayoutActivity">
    <View
        android:id="@+id/vA"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/primary"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="10dp"/>
    <View
        android:id="@+id/vB"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/dark_primary"
        android:layout_below="@id/vA"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="10dp"/>
    <View
        android:id="@+id/vC"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vA"
        android:layout_toRightOf="@+id/vB"
        android:layout_marginBottom="10dp"/>
    <View
        android:id="@+id/vD"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"/>
    <View
        android:id="@+id/vE"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_toRightOf="@id/vD"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"/>
    <View
        android:id="@+id/vF"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_toRightOf="@id/vE"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"/>
    <View
        android:id="@+id/vG"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_toRightOf="@id/vF"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"/>
    <View
        android:id="@+id/vH"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_toRightOf="@id/vG"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"/>
    <View
        android:id="@+id/vI"
        android:layout_width="60dp"
        android:layout_height="250dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vB"
        android:layout_toRightOf="@id/vH"
        android:layout_marginBottom="10dp" />
    <View
        android:id="@+id/vJ"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@color/dark_primary"

        android:layout_below="@id/vD"/>
    <View
        android:id="@+id/vK"
        android:layout_width="110dp"
        android:layout_height="180dp"
        android:background="@color/light_primary"
        android:layout_below="@id/vJ"/>
    <View
        android:id="@+id/vL"
        android:layout_width="300dp"
        android:layout_height="89dp"
        android:background="@color/primary"
        android:layout_below="@id/vJ"
        android:layout_toRightOf="@id/vK"/>

    <View
        android:id="@+id/vM"
        android:layout_width="300dp"
        android:layout_height="89dp"
        android:layout_below="@id/vL"
        android:layout_toRightOf="@id/vK"
        android:background="@color/dark_primary" />

</RelativeLayout>

Vamos a ver cómo, con Relative Layout, no podemos conseguir el Responsive Design que sí que se consigue con Linear Layout y con Constraint Layout como veremos en la siguiente página.

PreviousLinear Layout NextConstraint Layout

Last updated 1 year ago