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.
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:
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.
Last updated