Layouts

Si queremos combinar varios elementos de tipo vista tendremos que utilizar un objeto de tipo Layout. Un Layout es un contenedor de una o más vistas y controla su comportamiento y posición. Hay que destacar que un Layout puede contener a otro Layout y que es un descendiente de la clase View.

 La siguiente lista describe los Layout más utilizados en Android:

LinearLayout: Dispone los elementos en una fila o en una columna.
TableLayout: Distribuye los elementos de forma tabular.

RelativeLayout: Dispone los elementos en relación a otro o al padre.
ConstraintLayout: Versión mejorada de RelativeLayout, que permite una edición visual desde el editor.

FrameLayout: Permite el cambio dinámico de los elementos que contiene.
AbsoluteLayout: Posiciona los elementos de forma absoluta.

Dado que un ejemplo vale más que mil palabras, pasemos a mostrar cada uno de estos layouts en acción:
 

LinearLayout es uno de los Layout más utilizado en la práctica. Distribuye los elementos uno detrás de otro, bien de forma horizontal o vertical. 

<LinearLayout  xmlns:android="http://...
       android:layout_height="match_parent"      
       android:layout_width="match_parent"
       android:orientation ="vertical">
  <AnalogClock 
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"/>
  <CheckBox
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"
       android:text="Un checkBox"/>
  <Button
       android:layout_width="wrap_content"   
       android:layout_height="wrap_content"  
       android:text="Un botón"/>
  <TextView       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:text="Un texto cualquiera"/>
</LinearLayout>

TableLayout distribuye los elementos de forma tabular. Se utiliza la etiqueta <TableRow> cada vez que queremos insertar una nueva línea.

<TableLayout xmlns:android=”http://...
        android:layout_height="match_parent"
        android:layout_width="match_parent">
  <TableRow>
     <AnalogClock 
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"/>
     <CheckBox
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"  
        android:text="Un checkBox"/>
  </TableRow>
  <TableRow>
     <Button
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"   
        android:text="Un botón"/>
     <TextView  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"   
        android:text="Un texto cualquiera"/>
  </TableRow>
</TableLayout>

RelativeLayout permite comenzar a situar los elementos en cualquiera de los cuatro lados del contenedor e ir añadiendo nuevos elementos pegados a estos.

   

<RelativeLayout
   xmlns:android="http://schemas...
   android:layout_height="match_parent"
   android:layout_width="match_parent">
 <AnalogClock
   android:id="@+id/AnalogClock01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"/>
 <CheckBox
   android:id="@+id/CheckBox01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_below="@id/AnalogClock01"
   android:text="Un checkBox"/>
 <Button
   android:id="@+id/Button01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Un botón"
   android:layout_below="@id/CheckBox01"/>
 <TextView
   android:id="@+id/TextView01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:text="Un texto cualquiera"/>
</RelativeLayout>


ConstraintLayout  Versión más flexible y eficiente de RealiveLayout.

<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android="http://schemas...
   android:layout_height="match_parent"
   android:layout_width="match_parent">
 <AnalogClock
   android:id="@+id/AnalogClock01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>
 <CheckBox
   android:id="@+id/CheckBox01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Un checkBox"
   app:layout_constraintTop_toBottomOf=
                          "@+id/AnalogClock01"
   app:layout_constraintTop_toTopOf="parent"/>
 <Button
   android:id="@+id/Button01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Un botón"
   app:layout_constraintTop_toBottomOf=
                          "@+id/CheckBox01"
   app:layout_constraintLeft_toLeftOf=
                          "@+id/CheckBox01"/>
 <TextView
   android:id="@+id/TextView01"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Un texto cualquiera"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>



 

FrameLayout  posiciona las vistas usando todo el contenedor, sin distribuirlas espacialmente. Este Layout suele utilizarse cuando queremos que varias vistas ocupen un mismo lugar. Podemos hacer que solo una sea visible, o superponerlas.Para modificar la visibilidad de un elemento utilizaremos la propiedad visibility.

<FrameLayout xmlns:android="http://schemas...
  android:layout_height="mach_parent"       
  android:layout_width="match_parent">
  <AnalogClock
     android:layout_width="wrap_content"    
     android:layout_height="wrap_content"/>
  <CheckBox
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Un checkBox"/>
  <Button
     android:layout_width="wrap_content"    
     android:layout_height="wrap_content"
     android:text="Un botón"
     android:visibility="invisible"/>
  <TextView       
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Un texto cualquiera"
     android:visibility="invisible"/>
</FrameLayout>

AbsoluteLayout permite indicar las coordenadas (x,y) donde queremos que se visualice cada elemento. No es recomendable utilizar este tipo de Layout. La aplicación que estamos diseñando tiene que visualizarse correctamente en dispositivos con cualquier tamaño de pantalla. Para conseguir esto, no es una buena idea trabajar con coordenadas absolutas. De hecho, este tipo de Layout ha sido marcado como obsoleto.

<AbsoluteLayout xmlns:android="http://schemas.       
      android:layout_height="match_parent"       
      android:layout_width="match_parent">
  <AnalogClock 
      android:layout_width="wrap_content"   
      android:layout_height="wrap_content"
      android:layout_x="50px"
      android:layout_y="50px"/>
  <CheckBox
      android:layout_width="wrap_content"    
      android:layout_height="wrap_content"
      android:text="Un checkBox"
      android:layout_x="150px"
      android:layout_y="50px"/>
  <Button
      android:layout_width="wrap_content"    
      android:layout_height="wrap_content"   
      android:text="Un botón"
      android:layout_x="50px"
      android:layout_y="250px"/>
  <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"  
       android:text="Un texto cualquiera"
       android:layout_x="150px"
       android:layout_y="200px"/>
</AbsoluteLayout>

Si tienes dudas sobre cuando usar cada layout usa la siguiente tabla:
  • *   LinearLayout: Diseños muy sencillos.
  •   RelativeLayout: Nunca, hay una nueva alternativa
  • *   ConstraintLayout: Usar por defecto.
  • *   FrameLayout: Varias vistas superpuestas.
  • *   AbsoluteLayout: Nunca. Aunque está bien conocerlo por si acaso.
video[Tutorial] Los Layouts en Android

Preguntas de repaso: Los Layouts


Preguntas de repaso: Atributos de los layouts

También podemos utilizar otras clases de Layouts, que son descritas a continuación:

ScrollView: Visualiza una vista  en su interior; cuando estos no caben en pantalla se permite un deslizamiento vertical.

HorizontalScrollView: Visualiza una vista en su interior;; cuando esta no cabe en pantalla se permite un deslizamiento horizontal.

 TabLayout , FragmentTabHost, TabLayout ó TabHost: Proporciona una lista de pestañas que pueden ser pulsadas por el usuario para seleccionar el contenido a visualizar. Se estudia al final del capítulo. 

ListView: Visualiza una lista deslizable verticalmente de varios elementos. Su utilización es algo compleja. Se verá un ejemplo en el capítulo siguiente.

GridView: Visualiza una cuadrícula deslizable de varias filas y varias columnas.

RecyclerView: Versión actualizada que realiza las mismas funciones que ListView o GridView. Se verá en el siguiente capítulo.

ViewPager: Permite visualizar una serie de páginas, donde el usuario puede navegar arrastrando a derecha o izquierda. Cada página ha de ser almacenada en un fragment.