Cuando diseñas pantallas en Android, es muy común encontrar elementos que se repiten una y otra vez: el logo de la app, una barra de navegación, un botón de búsqueda o un botón para crear un nuevo elemento, como el de redactar correo en Gmail. Copiar y pegar las mismas líneas de código en cada vista no es una solución sostenible. Por eso Android ofrece dos mecanismos para reutilizar layouts: include y merge, cada uno con características y ventajas distintas.
¿Cómo extraer un elemento repetido a su propio layout?
El primer paso es identificar qué componente se repite en tus pantallas y separarlo en un archivo independiente. En la carpeta de recursos, dentro de layout, se crea un nuevo archivo XML, por ejemplo include_logo [01:07]. Ahí se coloca únicamente el widget que se quiere reutilizar, en este caso una imagen con el logotipo.
Cuando se extrae el elemento a un nuevo archivo, hay que ajustar el contenedor raíz. Si el layout original usaba ConstraintLayout, pero el nuevo archivo viene con un LinearLayout por defecto, es necesario cambiarlo para mantener la coherencia. También se debe agregar el namespace xmlns:app apuntando a http://schemas.android.com/apk/res-auto [01:38] para que los atributos personalizados funcionen correctamente.
¿Qué es el tag include y cómo se usa?
El tag <include> permite referenciar un layout externo dentro de otro layout sin copiar su contenido manualmente. Se utiliza así:
xml
<include
android:id="@+id/include_logo"
layout="@layout/include_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Es fundamental definir layout_width y layout_height en el tag <include>, ya que sin estas propiedades el elemento no se dimensiona correctamente y los componentes pueden desplazarse a posiciones inesperadas [02:33]. Una vez incluido, se puede asignar un id al <include> y referenciar ese id desde otros elementos para alinearlos.
¿Cuál es el problema de anidación con include?
Cuando Android resuelve un <include>, inserta el layout completo con su contenedor raíz. Si tanto el archivo principal como el incluido usan ConstraintLayout, se genera un ConstraintLayout dentro de otro ConstraintLayout [03:07]. Esta anidación innecesaria afecta el rendimiento, porque Android debe procesar un árbol jerárquico de vistas más profundo de lo necesario.
¿Qué es merge y en qué se diferencia de include?
Para evitar la anidación, existe el tag <merge>. Se crea un nuevo archivo, por ejemplo merge_logo, y en lugar de usar un contenedor como ConstraintLayout o LinearLayout, se reemplaza la raíz por <merge> [03:30].
xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
</merge>
El tag <merge> no tiene orientación ni actúa como contenedor. Cuando se referencia con <include layout="@layout/merge_logo" />, Android ignora el tag merge y coloca los widgets directamente dentro del layout padre [04:48]. Esto elimina el nivel extra de anidación.
¿Cómo alinear elementos dentro de un merge?
Como el <merge> no tiene contenedor propio, los elementos incluidos no traen restricciones de posición y pueden aparecer encimados [04:15]. La solución es referenciar directamente el id del widget que está dentro del merge desde el layout principal, usando las propiedades de alineación como layout_constraintTop_toTopOf="parent" o layout_constraintStart_toStartOf="parent" [04:25].
Al usar merge, no se necesita asignar un id al tag <include>, ya que ese id crea un elemento temporal innecesario. Al quitarlo, Android deja de mostrar conflictos [05:00].
¿Cómo afectan los estilos y temas al layout incluido?
Tanto con include como con merge, el tema y los estilos del layout contenedor afectan al elemento incluido [05:30]. Si la pantalla tiene un background verde, el componente reutilizado se verá sobre fondo verde; si es rojo, se verá sobre rojo. Esto significa que los layouts reutilizables heredan el contexto visual de donde se insertan.
Las diferencias principales entre ambos enfoques son:
- Include: inserta el layout completo con su contenedor raíz, lo que puede generar anidación.
- Merge: agrega los widgets como si fueran elementos nativos del layout padre, optimizando el árbol jerárquico.
- La elección entre uno y otro impacta directamente en el rendimiento de la aplicación a corto y largo plazo.
Reutilizar layouts con estas técnicas te permite definir una sola vez elementos como barras de búsqueda, botones de compra o logotipos, y referenciarlos en todas tus pantallas. Si ya aplicas estos patrones en tus proyectos, comparte cómo decides entre include y merge en cada caso.
