Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Curso Básico de Diseño de Interfaces con Android Studio

Contenido del curso

Introduccion

1
Creación de Interfaces de Usuario en Android con XML
03:39 min

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

20
Estilos y Atributos en XML: Curso Completo
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Curso Básico de Diseño de Interfaces con Android Studio

Clase 19 de 20

Clase 19 / 20

Recursos

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.

Andres López

Hace 6 años

En ocasiones hay elementos de layout que se repiten en muchas vistas o en su defecto en todas. En Android es posible reutilizar estos elementos, para ello hay que hacer lo siguiente:

Poner el elemento que se repite dentro de un nuevo Activity.

Ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="@dimen/width_logo"
        android:layout_height="@dimen/height_logo"
        android:contentDescription="@string/description_logo"
        android:src="@drawable/logo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Añadir ese archivo al layout en el que se quiere usar. Ejemplo:
```
<include layout="@layout/include_logo" />
```

Agregar los atributos necesarios para posicionar el elemento de la manera deseada. Ejemplo:

<include
        android:id="@+id/ivProfileLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/include_logo" />

Usar este método tiene un problema y es que cuando Android resuelva el layout va a tener en este caso un ConstraintLayout que tiene adentro otro ConstraintLayout, lo cuál cusa una anidación de layouts donde no es necesario y una consecuente perdida innecesaria de rendimiento.

Hay una de solucionar esto e incluir un layout dentro de otro sin que se genere una anidación, para conseguir eso hay que hacer lo siguiente:

Poner el elemento que se repite dentro de un nuevo Activity. Este Activity usará un ViewGroup <merge>.

Ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ivProfileLogo"
        android:layout_width="@dimen/width_logo"
        android:layout_height="@dimen/height_logo"
        android:contentDescription="@string/description_logo"
        android:src="@drawable/logo" />

</merge>

Añadir ese archivo al layout en el que se quiere usar. Ejemplo:

<include
        android:id="@+id/ivProfileLogo"
        layout="@layout/merge_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Agregar los atributos necesarios para posicionar el elemento de la manera deseada. Ejemplo:

<ImageView
        android:id="@+id/ivProfileLogo"
        android:layout_width="@dimen/width_logo"
        android:layout_height="@dimen/height_logo"
        android:contentDescription="@string/description_logo"
        android:src="@drawable/logo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Comentarios (24)24 comentarios

Luis Lira

Hace 7 años

Juan Diego Loaiza Martinez

Pedro Alejandro Rodríguez García

Miguel Angel Reyes Moreno

Adriana Gómez Hinojosa

Hace 5 años

Christian Gómez

José Sebastián Garcia

Ionut Pop

Ricardo Celis

Profesor

Rodrigo Rodriguez

Jhon Alex Fernandez Arenas

Carlos Lopez

Hace 2 años

Richard Quimbiulco

FABRIZIO VITORINO MONJARAS

Pablo Arturo Beltran Tovar

Hace 4 años

Alvaro Diego Pérez Vázquez

Ignacio Saccomano

Cesar Guevara Cabrera

Luis Gerardo Destephen

Enrique Rabell Talamantes

Oscar Fernando Diaz Anchay

Introduccion

Creación de Interfaces de Usuario en Android con XML

Revisando los archivos para una UI

Instalación de Android Studio para Desarrollo de Apps

Creación y gestión de proyectos en Android Studio

Creando una UI

Diseño de Interfaces en Android Studio: Herramientas y Técnicas

Gestión de Vistas y Recursos en Android Studio

Widgets y Vistas

Vistas y ViewGroups en Android: Diferencias y Uso Práctico

Atributos de Layout en Android: Width y Height

Atributos de Diseño y Referencias en Android Studio

Layouts base

Alineación de elementos con LinearLayout en Android

Diseño de Interfaces con RelativeLayout en Android

Diseño de Interfaces con Layout Relativo en Android

Uso de FrameLayout para Organizar Elementos en Android

Diseño de Interfaces con FrameLayout en Android Studio

Diseño de Interfaces con ConstraintLayout en Android Studio

Estilos y temas

Estilos en Android: Creación y Aplicación en Elementos de UI

Temas y Estilos en Android: Personalización Global de la App

Gestión de Dimensiones y Estilos en Android XML

Extendiendo los widgets

Integración de Librerías Externas en Proyectos Android

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Cierre

Estilos y Atributos en XML: Curso Completo

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Progreso del curso

Introduccion

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

Recursos

Recursos