Programación de Aplicaciones Android: Interfaz de usuario

Caso práctico

Primer plano de María, mirando hacia el frente.

Ministerio de Educación. (Uso educativo no comercial.)

Una vez que María y Juan han realizado un amplio repaso del mundo de las tecnologías móviles, Ada quiere que empiecen a realizar sus primeras aplicaciones. Por ahora, lo único que han hecho ha sido generar un ejemplo y han visto los ficheros más importantes que se han generado. Han podido probar la aplicación sencilla tanto en un emulador como en un dispositivo real, pero aún no se consideran “autores” de ese resultado. Ellos quieren comenzar a escribir el código de sus propias aplicaciones, aunque sean muy básicas.

1.- La interfaz de usuario

Caso práctico

Ocultar

Programador trabajando con su ordenador. Vista frontal

Ministerio de Educación. (Uso educativo no comercial.)

María y Juan ya se han familiarizado con el proceso de generación de una aplicación Android, llega el momento de empezar a escribir código propio.

Dado que ellos ya tienen conocimientos de programación, no se trata de volver a aprender lo que era un bucle, una clase o un objeto.

Ada les aconseja que empiecen por lo que es más específico de esta tecnología: las interfaces de usuario. Es entonces cuando les pregunta si recuerdan la unidad sobre interfaces que estudiaron en el módulo de Programación. Los conceptos que aparecían en esa unidad van a volver a ser utilizados ahora: componentes gráficos, pantalla, contenedor, evento, listener, manejador de eventos, etc.

Ocultar

Esquema de los lenguajes disponibles para Android

(ChatGPT). Imagen generada por IA (Dominio público)

La interfaz de usuario se refiere a todo aquello que el usuario puede ver y con lo que puede interactuar en cualquier aplicación. Android incluye componentes prediseñados que podemos utilizar en nuestras pantallas, tales como objetos de tipo layout (contenedores para organizar la estructura de la interfaz) y views (controles con los que el usuario podrá interactuar). También se incluyen otros módulos especiales como diálogos, notificaciones y menús, como veremos en esta unidad.

A lo largo del tiempo, Android ha ofrecido diferentes formas de construir interfaces. En el desarrollo Android, existen tres enfoques principales:

Programación Java + XML: es el enfoque más clásico. La interfaz se define en ficheros XML, donde se describe de forma declarativa la estructura de la pantalla (layouts y views). Luego, se utiliza código Java imperativo para controlar el comportamiento de estos elementos.
Programación Kotlin + XML: es una evolución natural del anterior, sustituyendo Java por Kotlin como lenguaje de programación principal. La interfaz sigue definiéndose en XML, pero la lógica de control e interacción se implementa con Kotlin, lo que permite aprovechar características modernas del lenguaje como la concisión, la seguridad contra nulls y las funciones de extensión.
Jetpack Compose: el nuevo framework declarativo de Google para construir interfaces de usuario en Android utilizando solo Kotlin, sin necesidad de XML. En Compose, la interfaz se construye directamente desde el código, describiendo cómo debe verse en función del estado actual de la aplicación. Es más flexible, escalable y moderno, y se integra fácilmente con otras bibliotecas de Jetpack.

Recomendación

Ocultar

Para desarrollar interfaces de usuario en Android, es importante conocer los tres enfoques principales, ya que muchas aplicaciones combinan o migran entre ellos. Por ello, vamos a estudiar los componentes imprescindibles necesarios para implementar de forma sencilla interfaces que sean intuitivas, uniformes, de fácil manejo para el usuario final, pero que a su vez sean capaces de sorprenderle.

Debemos tener siempre en cuenta que la calidad de la interfaz de usuario es un factor decisivo para el éxito o fracaso de cualquier aplicación.

1.1.- La pantalla de Android

Ocultar

Representación de los DPIs mediante iconos Android

Ann Wuyts. Diferentes DPIs en Android (CC BY-NC)

Antes de comenzar a desarrollar la interfaz de usuario, es fundamental tener en cuenta las características de la pantalla del dispositivo.

Como desarrolladores de en, buscamos que nuestras aplicaciones funcionen en una amplia variedad de dispositivos, desde smartphones hasta tablets o plegables. Esta diversidad implica diferencias en tamaño, densidad y resolución, que condicionan el diseño de nuestras interfaces.

Los conceptos clave que debemos considerar son:

Tamaño físico: longitud de la pantalla en diagonal, medida en pulgadas. Aunque en el pasado en clasificaba los dispositivos en cuatro grupos (small, normal, large y extra large), hoy en día se recomienda el uso de layouts adaptativos que se ajusten automáticamente a diferentes tamaños de pantalla, tanto en smartphones como tablets o dispositivos plegables.
Densidad: cantidad de píxeles en un área física de la pantalla, medida en puntos por pulgada (DPI). Android clasifica las pantallas en seis grupos según su densidad: LDPI, MDPI, HDPI, XHDPI, XXHDPI, y XXXHDPI.
Resolución: número de píxeles en la pantalla, tanto en horizontal como en vertical. Aunque la resolución varía entre dispositivos, en gestiona esto automáticamente basándose en el tamaño y la densidad de la pantalla. Es importante utilizar recursos gráficos escalables como imágenes vectoriales (VectorDrawable) para asegurar que las aplicaciones se adapten correctamente a cualquier densidad o resolución.
Píxeles independientes de la densidad (DP): esta es la unidad virtual que se utiliza para definir las dimensiones del diseño o la posición de los elementos de la interfaz de usuario de manera independiente a la densidad de la pantalla. Un dp equivale a un píxel físico en una pantalla de 160 DPI (densidad media). Android se encarga de escalar automáticamente la interfaz para que se ajuste a la densidad de cada pantalla.

Para diseñar interfaces flexibles y adaptativas, se recomienda el uso de ConstraintLayout como uno de los layouts más versátiles. Sin embargo, también existen otros layouts como GridLayout, FlexboxLayout o RelativeLayout que pueden ser útiles dependiendo del tipo de diseño que estemos creando. Además, herramientas como WindowManager facilitan la creación de interfaces que se ajusten a diferentes formatos, como dispositivos plegables o el modo multiventana.

En la siguiente tabla se muestran algunos de los tipos de pantalla más comunes teniendo en cuenta ambas características. Estas pantallas las podremos representar con el emulador y así probar mejor nuestras aplicaciones.

Tipos de pantalla más comunes según tamaño y densidad
Tipos de pantalla		DENSIDAD
Tipos de pantalla		LDPI (120)	MDPI (160)	HDPI (240)	XHDPI (320)	XXHDPI (480)	XXXHDPI (640)
TAMAÑO	Pequeña	QVGA (240x320)		480x640
	Normal	WQVGA (240x400)	HVGA (320x480)	WVGA (480x800)	720x1280	1080x1920	1440x2560
	Grande	WVGA (480x800)	600x1024	720x1280	1080x1920	1440x2560	2160x3840
	Extragrande	1024x600	1280x800	1536x2048	1920x2560	2560x3840	3200x5120

Para saber más

Ocultar

Si deseas profundizar más sobre los diferentes tipos de pantallas en Android puedes consultar la referencia de Android.

Tipos de pantallas en Android.

Autoevaluación

Ocultar

Pregunta

¿Cuál de las siguientes afirmaciones es CORRECTA sobre el diseño de interfaces para dispositivos Android?

Respuestas

Opción 1

Android clasifica las pantallas solo por tamaño físico, sin tener en cuenta la densidad o la resolución.

Opción 2

Los píxeles independientes de la densidad (DP) son una unidad de medida que se ajusta automáticamente según la densidad de la pantalla, permitiendo que el diseño sea consistente en diferentes dispositivos.

Opción 3

La resolución de la pantalla no tiene impacto en el diseño de la interfaz, ya que Android gestiona únicamente el tamaño de la pantalla.

Opción 4

El uso de imágenes rasterizadas (como PNG) es preferible a las imágenes vectoriales (VectorDrawable) para asegurar la compatibilidad en dispositivos de alta densidad.

Retroalimentación

Incorrecto

Correcta

Incorrecto

Solución

2.- Los Layouts de Android

Ocultar

Muestra una jerarquía de vistas. De WiewGroup cuelga otro ViewGroup, junto a otros dos cuadros con View. De este segundo ViewGroup, cuelgan tres cuadros con View.

Andriod Developers. Esquema de ViewGroups (CC BY)

Para el desarrollo de interfaces de usuario en en, tradicionalmente se han utilizado las clases View y ViewGroup, donde ViewGroup actúa como un contenedor (layout) para varios objetos View (componentes visuales de la interfaz, como botones, cajas de texto, imágenes y otros elementos) con los que los usuarios pueden interactuar.

Con la llegada de Jetpack Compose, se introduce un enfoque moderno y declarativo que simplifica la creación de interfaces al combinar diseño y lógica en un solo lugar. Jetpack Compose ha ganado popularidad rápidamente debido a su flexibilidad y eficiencia, y es recomendado especialmente para nuevos proyectos. Sin embargo, en este módulo nos enfocaremos en el uso de XML, que sigue siendo ampliamente utilizado en la mayoría de las aplicaciones en, especialmente en proyectos existentes. Este enfoque es más visual, separa claramente la lógica de la presentación y tiene una curva de aprendizaje menor para aquellos que están comenzando en el desarrollo de aplicaciones en.

A continuación, se presentan algunos de los tipos de layout más utilizados en el desarrollo tradicional con XML:

FrameLayout: Todas las vistas se colocan en la esquina superior izquierda y ocupan todo el espacio de la pantalla.
LinearLayout: Las vistas se organizan de manera vertical u horizontal.
TableLayout: Las vistas se organizan en celdas dentro de filas y columnas.
ConstraintLayout: Permite un posicionamiento más flexible mediante restricciones respecto a otras vistas o al contenedor padre.
RelativeLayout: Permite posicionar vistas en relación con otras vistas o el contenedor padre, lo que ofrece una mayor flexibilidad en la organización.
GridLayout: Organiza las vistas en una cuadrícula definida por filas y columnas, permitiendo un diseño más estructurado.
CoordinatorLayout: Un contenedor que facilita la coordinación de interacciones entre sus vistas hijas, ideal para manejar animaciones y desplazamientos.

Todos los archivos de diseño XML se almacenan en el directorio /res/layout/, una carpeta fundamental para organizar los layouts que nuestra aplicación utilizará. Cada archivo XML dentro de esta carpeta puede representar una pantalla o componente de la interfaz, facilitando la gestión del diseño conforme la aplicación crece. Además, en Studio proporciona herramientas de visualización para facilitar la edición de estos archivos, lo que permite a los desarrolladores ver el resultado final sin necesidad de compilar la aplicación cada vez.

Debes conocer

Ocultar

Android diferencia entre layouts y contenedores debido a sus roles específicos en la gestión de vistas. Mientras que los layouts se encargan de organizar las vistas en la interfaz, los contenedores permiten interacciones adicionales como desplazamiento o animaciones. Los contenedores no solo agrupan vistas, sino que gestionan el comportamiento dinámico de los elementos.

Algunos contenedores comunes en Android son: ScrollView, NestedScrollView, CardView, Toolbar, RecyclerView, etc.

Captura de pantalla que muestra la paleta de Android Studio

Elaboración propia. Captura de pantalla de la paleta de Android Studio (Apache 2.0)

2.1.- Atributos genéricos

Ocultar

Distintos tipos de plantillas para cada dispositivo.

CC by mhdbadi

¿Cómo podemos definir el tamaño, la orientación, alineación y otras características de una pantalla?

Como hemos comentado, utilizaremos ficheros XML para crear los layouts y organizar nuestras pantallas. Los ficheros XML están formados por etiquetas y atributos que nos permitirán realizar pantallas de forma muy fácil.

Antes de comenzar a ver cada uno de los layouts y las vistas que pueden contener nuestras pantallas, veamos qué atributos comunes tienen estos objetos y para qué sirven.

Los atributos de View y ViewGroup permiten modificar las propiedades de cada objeto de forma personalizada. Para ello, debemos conocer qué atributos podemos modificar según el tipo de objeto al que haga referencia el atributo. Estos atributos se definen en la clase LayoutParams de cada ViewGroup. Estos siguen el formato android:nombre_atributo. Algunos ejemplos serían android:layout_width, android:layout_height, android:paddingLeft, etc.

Vamos a ver algunos de los atributos más comunes que pueden aparecer en los objetos de tipo GroupView o layouts. Debemos recordar que la clase GroupView hereda de la clase View, por tanto, estos atributos también estarán presentes cuando veamos los objetos View o vistas.

ID: cualquier objeto de tipo View debe tener un identificador asociado que lo identifique de forma única. En los ficheros XML a este atributo se le asigna un tipo de dato String, pero cuando la aplicación sea compilada, el ID será referenciado como un integer.
Height y Width: se utilizan para definir la altura y la anchura del objeto tanto de un layout como en una vista o View. Los valores podemos asignarlos directamente usando las dimensiones que queremos definir, aunque no suele ser la práctica habitual. Es más recomendable utilizar los valores WRAP_CONTENT y MATCH_PARENT. Desde la versión API 8 el valor MATCH_PARENT ha sustituido al valor FILL_PARENT aunque este puede seguir usándose sin problemas. Con el valor WRAP_CONTENT, el objeto solo cogerá el espacio necesario para representarse con respecto al objeto contenedor o padre y con el valor MATCH_PARENT cogerá el espacio entero del padre.
Padding y Margins: ambos se utilizan para crear espacio alrededor de los objetos. Esto le da una mejor apariencia a nuestra interfaz de usuario. Con el atributo margin establecemos un espacio fuera del objeto con respecto a los otros objetos de alrededor, mientras que el atributo padding establece un espacio dentro del objeto, por ejemplo en el caso de tener un Button, la distancia desde el texto del botón a las líneas del mismo.
Gravity: este atributo se utiliza para alinear los objetos. Por defecto se alinean a la izquierda, si deseamos poner alguna otra alineación debemos utilizarlo.

A continuación, se muestra un ejemplo de sintaxis de todo lo anterior en un Layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout                                  <!-- Ejemplo de ViewGroup -->
    android:layout_width="match_parent"        <!-- El ancho del LinearLayout ocupa todo el ancho disponible -->
    android:layout_height="wrap_content"       <!-- La altura se ajusta al contenido interno -->
    android:orientation="vertical"             <!-- Organiza los elementos de forma vertical -->
    android:padding="16dp"                     <!-- Relleno interno de 16dp en todos los lados -->
    android:layout_margin="8dp"                <!-- Margen externo de 8dp en todos los lados -->
    android:gravity="center"                   <!-- Centra los elementos hijos dentro del LinearLayout -->
    android:background="#E0E0E0">              <!-- Fondo gris claro para visualizar el Layout -->

    <TextView                                  <!-- Ejemplo de View -->
        android:id="@+id/texto1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Texto 1"
        android:gravity="center"/>

</LinearLayout>

Autoevaluación

Ocultar

Retroalimentación

Falso

La afirmación es falsa. El valor MATCH_PARENT indica al objeto que abarque todo el espacio del padre mientras que el valor WRAP_CONTENT indica al objeto que coja el espacio necesario para mostrarse.

2.2.- Acceder a las vistas en código

Ocultar

kliwir art (Licencia de Flaticon)

Para mejorar nuestras aplicaciones y hacerlas más accesibles, necesitamos saber cómo acceder a los recursos, aunque esto se haga de forma transparente al usuario.

En Android, el diseño de la interfaz se maneja con XML y la lógica con Java o Kotlin. Al crear un proyecto en Android Studio, se genera automáticamente el archivo R.java (o R.kt en Kotlin), que contiene todas las referencias a los recursos. Este archivo no debe modificarse manualmente.

Para acceder a los recursos lo haremos de dos formas:

Mediante código Java o Kotlin: será necesario seguir la siguiente sintaxis:
```
[<nombre_paquete>.]R.<tipo_recurso>.<nombre_recurso>
```
Donde el nombre del paquete no es necesario si nos referimos a recursos que están dentro del mismo. Ejemplo de Java y Kotlin

JAVA

setContentView(R.layout.activity_main);
ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

KOTLIN

setContentView(R.layout.activity_main)
val imageView = findViewById<ImageView>(R.id.myimageview)
imageView.setImageResource(R.drawable.myimage

Mediante XML: será necesario seguir la siguiente sintaxis:

@[<nombre_paquete>:]<tipo_recurso>/<nombre_recurso>

Donde el nombre del paquete no es necesario si nos referimos a recursos que están dentro del mismo. Ejemplos:

<!-- Usando un recurso de texto en un TextView -->
<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

Debes conocer

Ocultar

A continuación se muestra un Codelab que guía a través de la creación de una interfaz sencilla.

Se puede acceder a través de este enlace.

2.3.- FrameLayout

Ocultar

Elaboración propia. Ejemplo de FrameLayout (Dominio público)

Este tipo de layout organiza todos los objetos de tipo View en la esquina superior izquierda uno encima de otro. En este tipo de contenedor se hace necesario utilizar el atributo android:visibility de los objetos View que lo componen para definir la transparencia de aquellos elementos que no queramos mostrar en un momento determinado de la aplicación.

Aquí vemos un ejemplo donde se insertan tres objetos View como son un TextView, un Button y un ProgressBar o barra de progreso y sólo dejamos visible el botón. Durante la ejecución se podrá cambiar el estado del atributo android:visibility de los demás objetos View para que se muestren por pantalla.

<FrameLayout 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"
    tools:context=".MainActivity" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Texto"
        android:visibility="invisible"
        android:textAppearance="?android:attr/textAppearanceLarge" />
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Boton" />
 
    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible" />
 
</FrameLayout>

Autoevaluación

Ocultar

Solución

2.4.- LinearLayout

Ocultar

Elaboración propia. Ejemplo LinearLayout Horizontal (Dominio público)

Elaboración propia. Ejemplo de LinearLayout Vertical (Dominio público)

Este tipo de layout dispone los elementos View o vistas de forma consecutiva en la pantalla. Puede utilizarse de forma vertical u horizontal mediante el atributo android:orientation. Las etiquetas que se utilizan para abrir y cerrar el layout son <LinearLayout> y </LinearLayout>

En el siguiente ejemplo puedes ver algunos de los atributos más utilizados en este tipo de layout. Recuerda que los valores de textos están introducidos mediante el fichero strings.xml de la carpeta /res/values/, aquí tan solo se referencia al contenido de ese tipo de recurso.

<LinearLayout 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"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/para" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/asunto" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/mensaje" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/enviar" />
</LinearLayout>

Este ejemplo de LinearLayout tiene asignada la anchura y altura del objeto padre, en este caso, la pantalla. Se define un espacio interior izquierdo y derecho de 16dp y la orientación es vertical.

En este layout se organizan tres objetos View o vistas de tipo EditText y un objeto Button. Fíjate que el botón se alinea a la derecha con el atributo de la vista: layout_gravity. Por ahora nos centraremos en los atributos del layout, ya que cada objeto View tiene su propia lista de atributos que veremos más adelante.

En este tipo de layout es interesante ver cómo algunas vistas tienen más espacio reservado que otras. Por defecto, si no se indica lo contrario, el sistema reparte todo el espacio del layout entre las vistas que lo contienen. Si nos fijamos en el tercer objeto de tipo EditText, comprobamos que tiene más espacio reservado que los dos anteriores. Esto se consigue con el atributo android:layout_weight que según el número que le asignamos tendrá más o menos peso a la hora de repartir el espacio disponible. Si no indicamos nada, cogerá el espacio necesario, si indicamos algún valor 1, 2, etc., repartirá el espacio total del layout dejando más espacio para las vistas que tengan el valor más alto y menos para el valor más bajo.

Para que el peso se ajuste correctamente y se repartan el espacio sobrante de la pantalla, es importante que el atributo android:layout_width sea igual a 0dp en un diseño horizontal. Si se trata de un diseño vertical, el atributo android:layout_heigh debe ser igual a 0dp.

Debes conocer

Ocultar

Es muy recomendable que revises todos los atributos específicos de este tipo de layout, puedes consultar la guía de referencia Android donde encontrarás la lista completa de parámetros que podrás utilizar.

Parámetros del LinearLayout

Ejercicio Resuelto

Ocultar

Crea una aplicación que contenga tres botones que estén alineados horizontalmente y cuyo texto sea el siguiente:

Botón 1
Soy el botón 2
Soy el último botón

Comprueba cómo el sistema operativo reparte el ancho de la ventana en base a la longitud del texto de los diferentes botones.

A continuación, asigna el siguiente peso a los botones:

Comprueba el comportamiento de la interfaz cuando se asigna el peso a cada botón.

Retroalimentación

<?xml version="1.0" encoding="utf-8"?><br />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />

    android:layout_width="match_parent"<br />

    android:layout_height="match_parent"<br />

    android:orientation="horizontal"<br />

    android:gravity="center_vertical"<br />

    android:layout_margin="@dimen/margin">

    <Button<br />

        android:layout_height="wrap_content"<br />

        android:layout_width="0dp"<br />

        style="?android:attr/buttonBarButtonStyle"<br />

        android:layout_weight="50"<br />

        android:gravity="end"<br />

        android:text="@string/fifty_weight"/>

    <Button<br />

        android:layout_height="wrap_content"<br />

        android:layout_width="0dp"<br />

        style="?android:attr/buttonBarButtonStyle"<br />

        android:layout_weight="30"<br />

        android:gravity="end"<br />

        android:text="@string/thirty_weight"/>

    <Button<br />

        android:layout_width="0dp"<br />

        style="?android:attr/buttonBarButtonStyle"<br />

        android:layout_height="wrap_content"<br />

        android:text="@string/twenty_weight"<br />

        android:layout_weight="30"<br />

        android:gravity="end"/>

</LinearLayout>

2.5.- TableLayout y GridLayout

Ocultar

Elaboración propia. Ejemplo de TableLayout y GridLayout (Dominio público)

En Android, existen diferentes tipos de layout para organizar las vistas en la interfaz de usuario. Dos de los layouts más utilizados para organizar los elementos en filas y columnas son TableLayout y GridLayout.

TableLayout organiza las vistas en forma de tabla, utilizando filas y columnas. Las filas se definen con la etiqueta , dentro de las cuales puedes colocar los elementos que desees. El número de columnas por fila puede variar, lo que hace que el TableLayout sea flexible en cuanto a la distribución de elementos. El ancho de cada columna se ajusta automáticamente al contenido más ancho de esa columna. Sin embargo, se pueden modificar con atributos como android:stretchColumn, android:shrinkColumns y android:collapseColumns. TableLayout es ideal cuando las filas tienen un número diferente de elementos o cuando la distribución no necesita ser estrictamente uniforme.

GridLayout, a diferencia del TableLayout, organiza los elementos en una cuadrícula predefinida de filas y columnas. Debes especificar un número fijo de filas y columnas utilizando los atributos android:rowCount y android:columnCount. Todos los elementos se distribuyen uniformemente dentro de esa cuadrícula, lo que resulta en un diseño más ordenado y controlado. Puedes usar android:layout_rowSpan y android:layout_columnSpan para hacer que un elemento ocupe más de una celda. GridLayout es ideal cuando deseas una disposición más estructurada y simétrica, especialmente en diseños donde se necesita un control preciso sobre la alineación y distribución de los elementos.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!-- Fila 1 -->
    <TableRow>
        <Button
            android:text="Botón 1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Botón 2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
    <!-- Fila 2 -->
    <TableRow>
        <Button
            android:text="Botón 3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
</TableLayout>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">
    <Button
        android:text="Botón 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Botón 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Botón 3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Botón 4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</GridLayout>

Recomendación

Ocultar

Usa TableLayout cuando necesites flexibilidad en la cantidad de columnas por fila, o cuando el diseño requiera que cada fila tenga un número diferente de elementos. Es ideal para interfaces donde las vistas pueden variar en tamaño o disposición entre filas. Usa GridLayout cuando quieras una distribución más ordenada y uniforme, con filas y columnas fijas. Este layout es perfecto para diseños que requieren una cuadrícula predecible y estructurada, como formularios o interfaces donde los elementos deben alinearse de manera consistente en una cuadrícula definida.

2.6.- ScrollView

Ocultar

Elaboración propia. Ejemplo de ScrollView (Dominio público)

Esta clase hereda de la clase FrameLayout y se utiliza como contenedor de objetos de tipo View que sean demasiado grandes para mostrarse en la pantalla. Añade automáticamente una barra de desplazamiento para poder visualizar el objeto al completo. Suele utilizarse en combinación con otros tipos de layout.

Vamos a comprobar su funcionamiento con un ejemplo en el que se ha utilizado dentro del ScrollView un LinearLayout para organizar el objeto TextView que contiene todo el texto que sobrepasa verticalmente la pantalla (el texto se guarda en el fichero de recursos strings.xml) y un objeto Button que deseamos visualizar cuando el usuario haya llegado hasta el final del texto. La utilización del atributo android:fillViewport define si queremos que el objeto ScrollView ocupe la pantalla completa, incluso si el contenido del texto no sobrepasa los límites de la pantalla verticalmente.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scrollview1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:paddingRight="5dp">
      <LinearLayout
            android:id="@+id/linearlayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
                 <TextView
                      android:id="@+id/textView1"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                    android:textAppearance=
                         "?android:attr/textAppearanceMedium"
                      android:text="@string/contenido" 
                      android:layout_weight="2"/>
                   <Button
                      android:id="@+id/button1"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                     android:text="Leido" />
     </LinearLayout>
</ScrollView>

Para saber más

Ocultar

Puedes aprender algo más sobre este tipo de contenedor y su utilización visitando esta página:

ScrollView.

Autoevaluación

Ocultar

Retroalimentación

Verdadero

Es cierto, este tipo de contenedor utiliza otros layouts para organizar su contenido.

2.7.- ConstraintLayout

Ocultar

Este Layout permite construir UI complejas sin crear anidamientos, ya que todas las vistas se encuentran en un mismo nivel. Antes de este Layout las interfaces complejas se construían anidando diferentes ViewGroup. Un ejemplo típico era usar LinearLayout dentro de un RelativeLayout para intentar centrar dos botones horizontalmente. Este Layout ofrece atributos que permiten crear interfaces de forma más sencilla que RelativeLayout al que ha sustituido, de forma que se relacionan las vistas mediante restricciones o constraints.

Este Layout muestra la información de forma más visual y permite construir la interfaz de una forma sencilla utilizando el Editor de diseño de Android Studio. Ya no se tiene que editar el código XML sino que se realiza de forma gráfica a través de la vista Design. Para añadir un botón al diseño se realizaría los siguientes pasos:

Se arrastra el widget Button desde el panel Pallete hasta la vista de diseño.
Todas las vistas del diseño aparecen en el panel Component Tree que muestra la jerarquía de vistas en nuestro diseño.
Se selecciona el componente en el diseño y a continuación en el panel Attributes aparecen los atributos que se han definido, pudiendo modificarlos o bien definir un atributo nuevo. Es recomendable utilizar el buscador que hay en la parte superior como muestra la imagen.

Se muestra el panel Attributes y el icono Search para buscar un atributo del componente

Elaboración propia (Captura de pantalla de Android Studio el cual tiene Licencia Apache 2.0). Opción "Buscar" en el panel de atributos (Apache 2.0)

En este componente es importante el icono Design y Blueprint de la barra de herramientas de Android Studio. Recuerda que en este desplegable puedes escoger cómo quieres ver tu diseño en el editor:

La vista Design muestra una vista real de la interfaz.
La vista Blueprint marca el contorno de cada vista y en el caso de ConstraintLayout las relaciones que se han definido en una vista respecto a otra, propiedades como el margen, si se ha definido una guía,... Esta vista es importante en este Layout porque nos ofrece una "radiografía" de nuestro diseño.
Finalmente, puedes optar por tener ambas vistas (Design + Blueprint) una al lado de la otra.

A continuación veremos qué hacen las distintas acciones de la barra de herramientas de este Layout , de izquierda a derecha:

Captura del IDE Eclipse. Eclipse Public License

View options: esta opción indica qué restricciones se quieren ver y en qué vista Design o Blueprint. A veces interesa ver todas las restricciones en las dos vistas seleccionando la opción Show All Constraints y los márgenes con la opción Show Margins. Pero a veces tanta información puede no ser necesaria en la vista de diseño y seleccionas la opción Fade Unselected Views.
Autoconnect: el icono del imán en la barra de herramientas activa la opción Autoconnect. Si esta opción está activa y desplazas una vista hacia los lados de la ventana principal, creará automáticamente la restricción con el padre en base a la posición de la vista y su proximidad a ambos lados del padre. Por defecto, esta opción está deshabilitada y solo crea restricciones con el padre, no con otras vistas.
Default Margin: esta opción permite crear un margen al valor indicado según se añade las restricciones a una vista. Un ejemplo de su utilidad es cuando se quiere que todas las vistas de la izquierda tengan un margen de 16dp con respecto al padre. Se inicializa el margen por defecto a 16dp y cuando se conecta la vista con el padre se crea automáticamente el margen de 16dp.
Clear All Constraints: si el diseño actual no te convence o bien simplemente quieres empezar de nuevo, haz clic en este icono y se eliminarán TODAS las restricciones.
Infer Constraint: cuando pulsas el icono de la varita mágica, Android Studio agregará todas las restricciones que faltan en tu diseño en base a una serie de algoritmos y probabilidades. Puede ser una fantástica idea que Android Studio implemente automáticamente las conexiones, pero puede pasar que no se parezca en nada a lo que tú querías hacer. Una opción intermedia es añadir una vista, pulsar este icono y modificar posteriormente el diseño en vez de esperar que Android Studio acierte con tu diseño.
Pack: esta opción se activa cuando se seleccionan varias vistas mediante la tecla <abbr title="Control" lang="en">Ctrl</abbr>. Permite realizar una serie de acciones (empaquetar, expandir o distribuir) de forma conjunta sobre las vistas seleccionadas.
Align: esta opción se activa cuando se seleccionan varias vistas mediante la tecla <abbr title="Control" lang="en">Ctrl</abbr>. En este menú se encuentra todas las posibles alineaciones de componentes. Por ejemplo, podemos seleccionar varias imágenes y en la barra de herramientas escoger la opción Align -> Verticals Center. De esta forma se agrega una nueva restricción que hace que las imágenes se alineen en la parte inferior y la parte superior con la imagen vecina.
Tools: en esta opción se encuentra una serie de herramientas que son el potencial de este Layout: líneas guía, las barreras, los grupos y las capas.

Debes conocer

Ocultar

Realiza el siguiente tutorial que te permitirá afianzar los contenidos que se han visto sobre la barra de herramientas de ConstraintLayout.

Comenzar con ConstraintLayout

Autoevaluación

Ocultar

Retroalimentación

Verdadero

La afirmación es correcta. Al igual que otros layout aparecen en el panel Attributes los atributos declarados y los que aún no se han definido, pero no tienen un widget específico dentro del panel como muestra la siguiente imagen.

Aparece el componente Constraint Widget a través del cual se puede crear las restriciones.

Captura del IDE Eclipse. Eclipse Public License

2.7.1.- Posición y tamaño de las vistas

Ocultar

Para posicionar una vista en ConstraintLayout se debe añadir una restricción (constraint) con respecto a otra vista o bien con respecto al nodo raíz y debe cumplir las siguientes reglas:

Cada vista debe tener al menos dos restricciones: una para el eje horizontal (comienzo y final) y otra restricción en el eje vertical (arriba, abajo y línea base).
Al crear una restricción se debe realizar entre puntos de anclaje que compartan el mismo plano, es decir, un punto de anclaje al comienzo de una vista sólo se puede unir a otro anclaje que esté al comienzo o final de otra vista.
Cada punto de anclaje sólo puede utilizarse para crear una sola restricción, pero puede ser el destino de varias restricciones siempre y cuando sean de vistas diferentes.

Esta imagen muestra cómo se posicionan las vistas dentro de ConstraintLayout

Captura del IDE Eclipse. Eclipse Public License

A continuación vamos a analizar los elementos que aparecen en la imagen:

Guías cuadradas: aparece en las esquinas de edtUser y se usan para ajustar el tamaño de la vista en dp.
Guía base: es el rectángulo con orillas redondas que se encuentra dentro de edtUser y se usa para alinear el contenido de la vista con la línea base de txvuser. Mediante este atributo se establece que edtUser se posiciona a la misma altura que txvUser en el eje y:
```
app:layout_constraintBaseline_toBaselineOf="@+id/txvUser" 
```
Restricciones: son los puntos de anclaje y se representan como círculos. Cuando hay una restricción entre dos vistas puede ser:
- Una línea en zig-zag. Este caso ocurre cuando hay dos restricciones que actúan como fuerzas opuestas que separan el componente y hay espacio sobrante a ambos lados del componente porque bien el ancho o el alto tiene asignado el valor wrap_content. Es lo que sucede con el componente edtUser. A la izquierda hay una restricción que indica que la vista comienza donde finaliza txvUser y a la derecha hay otra restricción que indica que finaliza en el padre o parent. Si este componente no ocupa todo el ancho de la ventana, ¿dónde se coloca finalmente la vista? Lo que hace el sistema es centrar la vista en el espacio disponible.
```
app:layout_constraintStart_toEndOf="@+id/txvUser"
```
```
app:layout_constraintEnd_toEndOf="parent"
```
- Una línea continua. En el caso de txvUser no hay dos restricciones opuestas, sino que se sitúa al inicio del padre y en la parte de arriba del padre.
```
app:layout_constraintStart_toStartOf="parent" 
```
```
app:layout_constraintTop_toTopOf="parent"
```
- Márgenes. Aparecen señalados mediante líneas continuas junto con el valor del margen en dp. La vista txvUser tiene un margen superior de 60dp y un margen inicial de 36dp.
```
android:layout_marginStart="32dp" 
```
```
android:layout_marginTop="64dp"
```

Si seleccionamos el componente edtUSer aparece el widget Attributes y se pueden realizar las siguientes operaciones:

Modificar los márgenes que se han aplicado. Mediante el desplegable se puede seleccionar valores por defecto o bien escribir directamente el valor del margen.
Crear conexiones con respecto al padre.
Eliminar una restricción ya creada pulsando sobre el círculo o punto de anclaje.
Seleccionar las restricciones que se han creado en la pestaña Design del Editor.
Modificar el tamaño de los componentes. Estos símbolos representan cómo se calcula el tamaño de la vista. Si haces clic en el símbolo cambiarás entre los diferentes tipos de configuración:

Fixed: se ha especificado un tamaño fijo en el cuadro de texto en dp.
Wrap Content: el tamaño de la vista será el tamaño necesario para poder mostrar el contenido.
Match Constraints: la vista se expande tanto como sea posible para cumplir con las restricciones de cada lado después de aplicar los márgenes de la vista. Para que se cumpla esta restricción se debe asignar el valor 0dp a layout_width si se quiere que se expanda horizontalmente o a layout_height para que se expanda verticalmente.

Se muestra la ventana de diseño del ejercicio realizado junto con el panel de atributos

Captura del IDE Eclipse. Eclipse Public License

Ejercicio Resuelto

Ocultar

Puedes descargarte el proyecto que se ha utilizado en este apartado en el caso que quieras resolver alguna duda en el siguiente enlace.

Ejemplo ConstraintLayoutLogin (zip - 0.46 MB)

Debes conocer

Ocultar

Consulta la sección Cómo crear una IU receptiva con ConstraintLayout de la documentación oficial, donde aprenderás las siguientes operaciones:

Crear una restricción.
Crear dos restricciones opuestas.
Eliminar una restricción.
Aplicar un margen a una vista
Alinear una vista con otra
Establecer el tamaño como una relación

Cómo crear una interfaz de usuario con ConstraintLayout.

2.7.2.- Sesgo, guías, barreras y cadenas

Ocultar

Seguimos con el ejercicio planteado ConstraintLatoutLogin. Como ya se comentó, el componente edtUser no ocupa todo el ancho de la pantalla, con lo cual se centra en el espacio disponible si tiene el atributo android:layout_width="wrap_content". Este Layout ofrece un parámetro _bias que permite desplazar una vista en términos de porcentajes (0% a 100%) o fracciones (0 a 1) en el eje horizontal o vertical con respecto a los anclajes que tiene el componente, es lo que se conoce como sesgo.

Si se mueve el sesgo horizontal en edtUser al valor 30%, lo que hace es que la vista se desplaza hacia la izquierda, dejando 1/3 del espacio disponible a la izquierda y 2/3 a la derecha. Este comportamiento se utiliza para garantizar que una vista tenga la misma posición independientemente de la densidad y tamaño de la pantalla.

Captura del IDE Eclipse. Eclipse Public License

La guía es una herramienta que se utiliza en la vista de diseño para poder alinear las vistas en base a un elemento pero que no se verá en el diseño de nuestra aplicación. Esta guía evita añadir en todos las vistas un margen concreto sino que se añade la restricción que la vista empieza al principio de la guía:

app:layout_constraintStart_toStartOf="@+id/guideline"

En la parte superior del diseño aparece el icono de la guía y se puede alternar entre los tipos haciendo clic repetidamente en el icono. Por defecto se indica un desplazamiento fijo en dp desde el borde inicial del layout ConstraintLayout, a continuación el desplazamiento fijo contando desde el final de la pantalla y finalmente el porcentaje del desplazamiento en base al ancho de la pantalla.

La barrera es una vista "invisible", pero que su efecto se muestra en tiempo de ejecución. Al igual que pasa con la guía, las vistas se limitan a la barrera, de forma que si una vista crece (porque el texto a mostrar aumenta, ya que hay un cambio de idioma en el dispositivo), la barrera ajustará su tamaño a la altura o anchura más grande de los elementos referenciados sin que se solape ninguna vista. Las barreras pueden ser verticales u horizontales y pueden crearse en la parte superior, inferior, izquierda o derecha de las vistas referenciadas.

Es curioso ver el código de las barreras en XML. En primer lugar, se debe establecer la dirección de la barrera. En el ejemplo ConstraintLayoutLogin la barrera se posiciona al final de txvUser o txvPassword dependiendo de cuál sea el más grande. A continuación se necesita un atributo para definir los ID de las múltiples vistas a las que hace referencia la barrera.

<android.support.constraint.Barrier"<br />

android:id="@+id/barrier"<br />

android:layout_width="wrap_content"<br />

android:layout_height="wrap_content"<br />

app:constraint_referenced_ids="edtUser,edtPassword"<br />

En el siguiente vídeo se muestra cómo crear una barrera:

Fran Lopez. Barrier ConstraintLayout Betabeers

Resumen textual alternativo

Finalmente, las cadenas son un tipo específico de restricción que permite compartir espacio entre las vistas que pertenecen a la cadena y controlar cómo se divide el espacio disponible entre ellas. Esta restricción se utiliza mucho para centrar dos botones con respecto al eje horizontal. Para crear una cadena se siguen los siguientes pasos:

Añadir dos botones btnLogin y btnSignUp.
Seleccionar los botones pulsando la tecla <abbr title="Control" lang="en">Ctrl</abbr> -> opción Chains del menú contextual -> Create Horizontal Chain.

Se puede comprobar como una cadena une las dos vistas.

Captura del IDE Eclipse. Eclipse Public License

Si se quiere explorar algunos de los modos de cadena, hay que hacer clic en una de las vistas de la cadena en el panel Component Tree, mostrar el menú contextual y seleccionar la opción Cicle Chain Mode. Se puede simplificar en tres modos:

Empaquetado (paqued): los elementos se agrupan en el centro del espacio disponible. En esta opción se puede utilizar márgenes para separar las vistas ligeramente. Con esta opción y utilizando las _bias se pueden centrar todas las vistas aplicando un sesgo de 0.5 o bien desplazar la cadena hacia un lado.
Distribución (spread): los elementos se extienden por el espacio disponible, como se muestra arriba.
Separación en el interior (spread_inside): similar a la opción anterior, pero las vistas finales de la cadena no se extienden.

No existe un atributo específico en XML que se asigne a todas las vistas, sino que se establece el atributo app:layout_constraintHorizontal_chainStyle="spread" en una de las vistas de la cadena.

Debes conocer

Ocultar

En el caso que tengas dudas te mostramos a continuación dos vídeos en inglés que explican de forma detallada cómo crear los contenidos estudiados en este apartado.

Coding in Flow. Resumen textual alternativo.

Coding in Flow. Resumen textual alternativo

2.8.- CoordinatorLayout

Ocultar

Elaboración propia. Ejemplo de CoordinatorLayout (Dominio público)

CoordinatorLayout es un contenedor de vistas avanzado que permite coordinar el comportamiento entre varias vistas hijas dentro de una misma jerarquía. Forma parte de la biblioteca de diseño de Android y se utiliza frecuentemente en interfaces modernas que siguen las pautas de Material Design. Su objetivo principal es facilitar la interacción entre componentes visuales, como permitir que una barra de herramientas se oculte al hacer scroll, o que un FloatingActionButton se desplace automáticamente cuando aparece una notificación en forma de Snackbar.

Este layout se destaca por su capacidad para gestionar comportamientos complejos mediante el uso de clases llamadas Behaviors, que se asignan a las vistas hijas a través de atributos XML. Por ejemplo, se puede hacer que una vista se desplace en sincronía con un AppBarLayout, o que un FloatingActionButton desaparezca al hacer scroll. Estos comportamientos pueden ser personalizados o utilizar los que ya ofrece la propia biblioteca de Android.

En una implementación típica, CoordinatorLayout actúa como contenedor raíz y dentro de él se colocan elementos como:

AppBarLayout – agrupa a Toolbar y otros elementos del encabezado.
NestedScrollView – para contenido desplazable.
FloatingActionButton – botón flotante para acciones destacadas.

La combinación de estos componentes permite lograr diseños dinámicos y fluidos, como una barra de herramientas que se colapsa al desplazarse hacia abajo, o botones que evitan ser tapados por otros elementos como un Snackbar. Todo esto se gestiona automáticamente gracias a los comportamientos que Android define por defecto, como AppBarLayout.ScrollingViewBehavior.

Propiedades destacadas de las vistas hijas en un CoordinatorLayout:

app:layout_behavior: permite definir el comportamiento de la vista hija.
android:layout_gravity: controla la posición relativa dentro del layout.
android:layout_margin: márgenes externos de la vista hija.

A continuación, se muestra un ejemplo representativo de uso:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Contenido desplazable aquí -->

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Aunque CoordinatorLayout no tiene muchas propiedades visuales propias, su valor está en la forma en que permite que las vistas hijas interactúen entre sí. Es especialmente útil cuando se desea construir una interfaz compleja sin tener que escribir mucho código adicional. Además, es extensible: los desarrolladores pueden crear sus propios Behaviors personalizados si las necesidades del diseño así lo requieren.

En resumen, CoordinatorLayout es una herramienta clave para crear interfaces adaptativas, elegantes y alineadas con Material Design, con soporte nativo para animaciones, desplazamientos sincronizados y una organización eficiente de los elementos visuales de la app.

Autoevaluación

Ocultar

Solución

2.9.- RelativeLayout

Ocultar

Elaboración propia. Ejemplo de RelativeLayout (Dominio público)

RelativeLayout es un tipo de contenedor de vistas en Android que permite posicionar elementos en relación con otros elementos del mismo layout, o en relación con el propio contenedor. Es especialmente útil cuando se desea un control más preciso sobre la colocación de los elementos sin recurrir a estructuras anidadas. Cada vista hija puede especificar reglas que indican cómo se debe posicionar respecto a otras vistas identificadas por su id.

A diferencia de otros contenedores más estructurados como LinearLayout, el RelativeLayout ofrece una mayor flexibilidad, permitiendo que los elementos se alineen, por ejemplo, a la derecha o debajo de otra vista, lo cual ayuda a reducir la profundidad de la jerarquía de vistas y mejorar el rendimiento del renderizado.

Este contenedor fue ampliamente utilizado antes de la llegada de ConstraintLayout, y aunque en proyectos actuales suele ser reemplazado por este último, sigue siendo útil para interfaces simples o migraciones progresivas.

Propiedades más comunes de las vistas hijas dentro de un RelativeLayout:

android:layout_alignParentTop: alinea la vista al borde superior del contenedor.
android:layout_alignParentBottom: alinea la vista al borde inferior del contenedor.
android:layout_centerInParent: centra la vista en el contenedor.
android:layout_toRightOf: posiciona la vista a la derecha de otra vista.
android:layout_below: posiciona la vista por debajo de otra vista.

A continuación, se muestra un ejemplo representativo del uso de RelativeLayout con tres botones posicionados en distintas relaciones:

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

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Botón 1"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Botón 2"
        android:layout_below="@id/btn1"
        android:layout_alignParentStart="true" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Botón 3"
        android:layout_below="@id/btn1"
        android:layout_toEndOf="@id/btn2" />

</RelativeLayout>

La disposición relativa de las vistas se basa completamente en los identificadores asignados y en las propiedades de alineación. Por ello, es importante tener claro el orden de declaración de los elementos y su relación entre sí. Este tipo de layout sigue siendo una herramienta válida, especialmente cuando se requiere una estructura no lineal, con dependencias espaciales entre componentes visuales.

Aunque su uso ha disminuido con la introducción de ConstraintLayout, RelativeLayout sigue formando parte del arsenal de herramientas para construir interfaces eficientes y claras en Android.

Autoevaluación

Ocultar

Solución

3.- Eventos de usuario

Caso práctico

Ocultar

Los componentes del equipo de trabajo reunidos para tratar temas.

Ministerio de Educación. (Uso educativo no comercial.)

El diseño de la pantalla está terminado, pero de nada sirve tener una pantalla si al pulsar en un botón, éste no hace nada.

Ada se reúne con el equipo de desarrolladores para explicar qué funcionalidad se requiere conseguir mediante la gestión de eventos del usuario y además, en este caso, será mucho mejor utilizar la programación en código Java para su implementación.

Ocultar

Eucalyp (Licencia de Flaticon)

En Android, los eventos de usuario son las acciones que los usuarios realizan sobre el dispositivo, como pulsar un botón, arrastrar un elemento en la pantalla, entre otros. Estos eventos son gestionados por los llamados Listeners, que permiten que el sistema reaccione ante estas interacciones. Existen diferentes tipos de eventos que pueden ser escuchados, y el enfoque para manejarlos ha evolucionado a lo largo de los años con la introducción de nuevas características en Java y Kotlin.

Un Listener es un componente que gestiona un evento. Normalmente, cada tipo de evento tiene su propio Listener, que es una clase abstracta. El desarrollador debe implementar los métodos correspondientes para que se maneje el evento. Un ejemplo común es el OnClickListener, que escucha los clics en los elementos de la interfaz.

Los métodos de registro permiten asociar un Listener a un evento. En Android, estos métodos suelen ser parte de la clase android.view.View. Por ejemplo, el método setOnClickListener() permite registrar un OnClickListener para un botón. Los eventos se pueden implementar de forma anónima, dentro del propio componente, un botón en este caso:

JAVA<br />
Button boton = (Button) findViewById(R.id.button1);
boton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        TextView texto = (TextView) findViewById(R.id.textView1);
        texto.setText(R.string.despedida);
    }
});

KOTLIN

val boton: Button = findViewById(R.id.button1)
boton.setOnClickListener {
    val texto: TextView = findViewById(R.id.textView1)
    texto.setText(R.string.despedida)
}

O se puede implementar dentro de la clase, para poder ser reutilizada por varios componentes.

JAVA

public class MainActivity extends Activity implements View.OnClickListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Button boton = (Button) findViewById(R.id.button1);
        boton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        TextView texto = (TextView) findViewById(R.id.textView1);
        texto.setText(R.string.despedida);
    }
}

KOTLIN

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val boton: Button = findViewById(R.id.button1)
        boton.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        val texto: TextView = findViewById(R.id.textView1)
        texto.setText(R.string.despedida)
    }
}

Como se observa en los ejemplos anteriores, el evento onClick() se maneja de distintas formas. La implementación anónima es útil cuando el comportamiento de la acción es específico y pequeño, mientras que la implementación en la misma clase es más eficiente en términos de memoria, ya que no crea clases adicionales.

El uso de Kotlin mejora la legibilidad y reduce la necesidad de crear clases adicionales, lo que hace que el manejo de eventos sea más eficiente y fácil de implementar. Además, el uso de lambdas en Kotlin facilita la escritura de código más limpio y compacto.

Debes conocer

Ocultar

Existen muchos tipos de eventos, algunos de ellos comunes a varios tipos de objetos, otros más específicos de cada uno. Es fundamental consultar la página oficial de Android.

Tipos de eventos en Android

4.- Componentes de la interfaz

Caso práctico

Ocultar

Ministerio de Educación. (Uso educativo no comercial.)

Juan ya ha comprobado las diferentes formas de organizar los elementos que contienen cada una de las pantallas que puede diseñar. Ha insertado algunos objetos de tipo View en algunos Layouts como son el TextView, Button o EditText, pero quiere saber cuáles son todos los objetos View que puede utilizar para desarrollar sus aplicaciones Android.

Ocultar

¿Qué objetos de tipo View se pueden utilizar en las aplicaciones Android?

Para diseñar una pantalla o interfaz de usuario es fundamental incorporar elementos para que el usuario pueda interactuar con la aplicación que creemos. Estos objetos, también llamados controles, vienen definidos en la clase View y los atributos de los que dispone para personalizarlos, dependerá de cada uno de ellos, aunque como vimos anteriormente hay muchos atributos comunes a todos.

CC by-nc-sa 2.0 MarcelaPalma

Si estamos diseñando la interfaz de usuario mediante un fichero XML, es fácil e intuitivo organizar en el layout elegido como contenedor los distintos botones, etiquetas, cuadros de textos y otros controles que necesitemos. Como ya vimos al comienzo del apartado anterior, Android Studio incorpora una forma muy sencilla de insertar los objetos View sobre un Layout, utilizando la interfaz gráfica (arrastrar y soltar los objetos View desde la paleta al lienzo) o bien mediante código XML escribiendo las etiquetas y atributos apropiados de cada objeto.

Podemos organizar los distintos objetos View en tres grupos:

Controles básicos: son controles que aparecen en la mayoría de las pantallas de una aplicación debido a su gran utilización. Aquí encontramos los típicos botones, imágenes, etiquetas, cuadros de texto, etc.
Controles de selección: permiten seleccionar una opción de un listado de opciones. Aquí encontramos por ejemplo listas fijas o desplegables y tablas.
Controles personalizados: podemos crear nuestros propios controles para ofrecer un diseño más apropiado a nuestras aplicaciones de los que nos ofrecen los controles convencionales.

Para saber más

Ocultar

en diferencia entre layouts y contenedores debido a sus roles específicos en la gestión de vistas. Mientras que los layouts se encargan de organizar las vistas en la interfaz, los contenedores permiten interacciones adicionales como desplazamiento o animaciones. Los contenedores no solo agrupan vistas, sino que gestionan el comportamiento dinámico de los elementos.

Algunos contenedores comunes en en son: ScrollView, NestedScrollView, CardView.

Para conocer más detalles sobre cómo aprovechar estos elementos, puedes acceder a

4.1.- Controles básicos

Ocultar

Ilustración que muestra de forma esquemática distintos tipos de controles básicos.

Android Developpers (CC BY)

Llegados a este punto, nos planteamos algunas cuestiones, como las siguientes:

¿Cómo puedes utilizar las aplicaciones instaladas en tu dispositivo móvil?
¿Cómo rellenas un formulario con tus datos personales?
¿Utilizas algún botón para confirmar alguna acción como “enviar”?

Pues bien, todas estas acciones las podemos llevar a cabo porque las diferentes pantallas por las que navegamos en nuestra aplicación disponen de elementos o controles predeterminados que nos permiten interactuar con el dispositivo. Veremos a continuación cuáles son.

Ocultar

TextView

Muestra un campo de texto al usuario. Este texto no es editable por el usuario. Se podrá modificar su estilo mediante los siguientes atributos:

android:text: mediante este atributo se establece el texto por defecto. Se utilizará el recurso @string para poder mostrar el texto en diferentes idiomas.
android:background: permite establecer el color de fondo del Textview.
android:textColor: es un valor en hexadecimal que indica el color del texto.
android:textSize: en un valor en sp que indica el tamaño del texto.
android:textStyle: permite establecer el estilo de texto en normal, negrita (bold) o cursiva (italic).