Programación Android, RelativeLayout

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0

Su principal característica es que los widgets que estén dentro de este contenedor basarán su posición en relación con los otros elementos. De esta forma, podemos definir que el widget X quede debajo del widget Y, y que a su vez éste se alinee verticalmente con el widget Z.

Además de posicionar un elemento con respecto a otro del mismo nivel, también podemos hacerlo con respecto al área que corresponde al RelativeLayout.

Este tipo de contenedor es una herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de usuario ya que permite eliminar ViewGroups anidados, lo cual es útil para reemplazar un diseño en el que tenemos una gran cantidad de grupos dentro de un contenedor de tipo LinearLayout y hacerlo más eficiente utilizando un RelativeLayout.

Los atributos que nos sirven para posicionar los elementos con respecto a otros widgets son:

  • android:layout_above: Indica que el elemento se posicionará justo encima del elemento que tiene el ID definido como valor de este atributo.
  • android:layout_toLeftOf: Indica que el elemento se posicionará a la izquierda del elemento cuyo ID coincida con el definido en el valor de este atributo.
  • android:layout_toRightOf: Indica que el elemento se posicionará a la derecha del elemento cuyo ID coincida con el definido en el valor de este atributo.
  • android:layout_bottom: Posiciona al elemento debajo del que tenga la ID proporcionada en el valor del atributo.


En el lsitado anterior tendremos que proporcionar siempre un ID de otro elemento, ejemplo:


android:layout_toLeftOf="@id/ok"

En este ejemplo el elemento cuyo id es “ok” ya se definió anteriormente en el XML.

También podemos encontrar una serie de atributos que admiten valores boolean (true o false), que nos permiten posicionar los widgets en función al propio layout contenedor:

  • android:layout_alignParentTop: Indica al widget que su borde superior deberá estar alineado con el borde superior del contenedor.
  • android:layout_alignParentBottom: Indica al widget que su borde inferior deberá estar alineado con el borde inferior del contenedor.
  • android:layout_alignParentLeft: Indica al widget que su borde izquierdo deberá estar alineado con el borde izquierdo del contenedor.
  • android_layout_alignParentRight: Indica al widget que su borde derecho deberá estar alineado con el borde izquierdo del contenedor.

Existen más atributos que se pueden utilizar, explicados en la guía oficial de Android Developers.

Centrar un elemento en la pantalla:

Un error frecuente es atribuir la propiedad android:layout_gravity a un control en RelativeLayout, esta propiedad no está definida en RelativeLayout.LayoutParams. Se deben utilizar los siguientes atributos, que también reciben valores boolean:

  • android:layout_centerHorizontal: Permite centrar horizontalmente al widget con respecto a su contenedor.
  • android:layout_centerVertical: Permite centrar verticalmente al widget con respecto a su contenedor.
  • android:layout_centerInParent: Permite centrar un widget en la mitad de la pantalla.

Un ejemplo de un RelativeLayout sería:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/tvDollars"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="15dp"
        android:text="@string/dolares" />

    <EditText
        android:id="@+id/etDollars"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tvDollars"
        android:layout_below="@id/tvDollars"
        android:ems="10"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/tvEuros"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/etDollars"
        android:layout_below="@id/etDollars"
        android:layout_marginTop="20dp"
        android:text="@string/euros" />

    <EditText
        android:id="@+id/etEuros"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tvEuros"
        android:layout_below="@id/tvEuros"
        android:layout_marginTop="12dp"
        android:ems="10"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/tvConvert"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/etEuros"
        android:layout_below="@id/etEuros"
        android:layout_marginTop="20dp"
        android:text="@string/convert" />

    <TextView
        android:id="@+id/tvValorConversion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tvConvert"
        android:layout_marginTop="12dp"
        android:layout_alignLeft="@id/tvConvert"
        android:text="@string/valorConversion" />

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tvValorConversion"
        android:layout_below="@id/tvValorConversion" >

        <RadioButton
            android:id="@+id/rbDollar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="@string/rbDollar" />

        <RadioButton
            android:id="@+id/rbEuro"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rbEuro" />
    </RadioGroup>

    <Button
        android:id="@+id/btConvert"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/radioGroup1"
        android:layout_below="@id/radioGroup1"
        android:layout_marginTop="20dp"
        android:text="@string/btConvert"
        android:onClick="onClick" />

    <Button
        android:id="@+id/btCambValorConver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/tvValorConversion"
        android:layout_alignBottom="@id/tvValorConversion"
        android:layout_toRightOf="@id/tvConvert"
        android:text="@string/btCambValorConver"
        android:onClick="onClick" />

</RelativeLayout>

Y la apariencia que tendría:
RelativeLayout

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0
The following two tabs change content below.
Reborn as IT Developer. Desarrollador Android y fundador de Proyecto Simio. "En realidad, yo no puedo enseñar nada a nadie, sólo puedo hacerles pensar." - Sócrates.

2 thoughts on “Programación Android, RelativeLayout

Deja un comentario