No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Reutilizando elementos

19/20
Recursos

¿Cómo reutilizar elementos en aplicaciones Android?

Diseñar aplicaciones Android puede ser complejo, especialmente cuando se necesita replicar elementos comunes, como logotipos o barras de herramientas, en diferentes pantallas. Por suerte, Android ofrece mecanismos para reutilizar estos elementos de manera eficiente, evitando así la duplicación de código. En esta guía, aprenderás a crear y utilizar layouts reutilizables mediante include y merge, optimizando así el desarrollo y mantenimiento de tu app.

¿Qué es un archivo de layout en Android?

En Android, un layout (o diseño) es un archivo XML que define la estructura de una interfaz de usuario. Los files de layout permiten organizar visualmente elementos como botones, texto e imágenes en una pantalla y son esenciales para consolidar la apariencia estética de la aplicación.

¿Cómo crear un layout reutilizable con include?

Usar <include> es una forma sencilla de reutilizar layouts. Esto se hace moviendo elementos repetitivos a un archivo separado y referenciándolo en otras vistas, lo cual es útil para mantener la consistencia y simplificar el diseño.

Implementación con include

  1. Crear un archivo de layout básico: Dirígete a la carpeta de recursos (res) y dentro del directorio layout, crea un nuevo archivo XML que contenga únicamente los elementos que quieres reutilizar, como un logotipo.

    <!-- res/layout/include_logo.xml -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/logo_image"/>
    </LinearLayout>
    
  2. Referenciar el layout en otras vistas: Usa la etiqueta <include> en los archivos de layout donde necesites incorporar el diseño.

    <!-- res/layout/activity_main.xml -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/include_logo"/>
    </LinearLayout>
    

¿Cómo optimizar layouts usando merge?

Aunque <include> agrega elementos directamente a tu layout, puede causar un nesting innecesario si ya estás usando un layout como LinearLayout, lo que podría afectar el rendimiento. Aquí es donde <merge> se convierte en una opción ideal.

Implementación con merge

  1. Crear un archivo de layout con merge: Sustituye el LinearLayout o cualquier ViewGroup por una etiqueta <merge> en el archivo de layout que quieres reutilizar.

    <!-- res/layout/merge_logo.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_image"/>
    </merge>
    
  2. Incluir el layout merge en otros layouts: Utiliza la etiqueta <include> en tu layout principal, apuntando al archivo que contiene la <merge>.

    <!-- res/layout/activity_main.xml -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/merge_logo"/>
    </LinearLayout>
    

¿Cuáles son las ventajas y consideraciones de usar include y merge?

Elegir entre include y merge depende del contexto de tu diseño y rendimiento deseado. Aquí te dejamos detalles importantes:

  • Ventajas de include:

    • Es fácil de implementar y entender.
    • Ideal para fragmentos simples que no introducen problemas de rendimiento con nesting adicional.
  • Ventajas de merge:

    • Reduce el nesting innecesario, mejorando el rendimiento.
    • Ideal para layouts embebidos dentro de otros layouts complejos.
  • Consideraciones:

    • Ambos métodos permiten estilizar los elementos incluidos según el contexto del layout principal donde se integran.
    • Asegúrate de que los estilos de los layouts externos no interfieran de manera negativa en los elementos reutilizados.

Implementar layouts reutilizables en Android de forma eficiente no solo mejora el rendimiento de la aplicación, sino que también simplifica su mantenimiento. Continúa explorando las herramientas de Android para seguir optimizando tus diseños y convirtiéndote en un desarrollador más efectivo. ¡Buena suerte en tu camino de aprendizaje!

Aportes 18

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Y cómo haríamos para centrar de nuevo el logo?
O sea, yo lo centré usando un RelativeLayout, poniendo los constraints y en su contenido puse el include, pero no sé si eso también es un anidamiento innecesario.

¿Cuál sería la manera correcta?
Así es como lo puse:

    <RelativeLayout
        android:id="@+id/logoContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <include layout="@layout/merge_logo" />
    </RelativeLayout>

Para centrar el logo, simplemente vamos a merge_logo y ahi agregamos los constraint que centran el view.

Lo que sucede con merge es que android hace de cuenta como si ese ImageView fuera sido declarado dentro de nuestro propio layout donde lo agregamos, el no se da cuenta que viene de otra parte.

Entonces en merge_logo podriamos definir como quiero que se vea mi elemento en los otros layout donde lo voy a invocar.

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:

  1. 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>
    
  2. Añadir ese archivo al layout en el que se quiere usar. Ejemplo:

    <include layout="@layout/include_logo" />
    
  3. 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:

  1. 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>
    
  2. 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" />
    
  3. 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" />
    

La diferencia entre Include y Merge es que Include va a halar todos los elementos que ya tengas en el Layout.


Merge: simplemente los va a agregar como si fueran elementos presentes en tu Layout.

La diferencia entre Include y Merge es la forma en la que Android Studio los instancia:
Usando un layout tipo Include, Android Studio creará un layout adicional a la hora de referenciar a ese elemento.
Y si extraemos los elementos dentro de un layout tipo Merge, Android Studio los agrega como un elemento normal, sin crear layouts adicionales.

Increible clase

Asi nomas

Lo que desarrolle con el curso 😃

  • Include trae a tu vista un conjunto de elementos

  • Merge trae las propiedades de los elementos que se utiliza include

Hice esta página de login:

El include es de este archivo:

Alguien sabe a que se refiere con afectar el árbol jerargico de las vistas, me refiero a que cual seria el impacto en este o en el rendimiento de la app?

TIP: puedes agregar el Namespace de app escribiendo appNS en Android Studio y luego dándole a la tecla Tab

De esta manera pude centrar el logo:

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

<ImageView
    android:id="@+id/ivLoginLogo"
    android:layout_width="match_parent"
    android:layout_height="@dimen/height_logo"
    android:src="@drawable/logpa" />

</merge>

Elementos
SI hay un elemento exactamente igual siempre existe un a manera para no tener que tener las mismas lineas repetidas una y otra vez.
Para esto crearemos un layout exclusivamente con ese elemento y para incluirlo usaremos <include layout"@…"/>Es recomendable que el layout nuevo sea un tipo merge, para que no se aniden los layouts, esto sera mejor para andorid

Una consulta, al utilizar el merge, centrarlo y visualizar los constraint en diseño y blueprint, esta bien que salga como si merge es de un tamaño muy pequeño en la esquina superior izquierda? ![](https://static.platzi.com/media/user_upload/image-6e020164-cfab-4265-b9cd-e4397e81da5f.jpg)

A darle atomos