Reutiliza diseños con <include>

Aunque Android ofrece una variedad de widgets para proporcionar elementos interactivos pequeños, reutilizables, es posible que también debas reutilizar componentes más grandes que requieran un diseño especial. Para volver a usar diseños completos de manera eficiente, usa las etiquetas <include> y <merge> para incorporar un diseño dentro de otro.

Esto te permite crear diseños complejos, como un panel de botones de sí o no o una barra de progreso personalizada con texto descriptivo. Además, significa que puedes extraer cualquier elemento de tu aplicación que sea común en varios diseños, administrarlos por separado e incluirlos en cada diseño. Si bien puedes crear componentes de IU individuales si escribes un elemento View personalizado, puedes hacerlo más fácilmente reutilizando un archivo de diseño.

Crea un diseño reutilizable

Para comenzar, crea un nuevo archivo en formato XML y define el diseño que desees volver a usar. Por ejemplo, a continuación, se incluye un diseño que define una barra de título que se incluirá en cada actividad (titlebar.xml):

<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="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

El elemento View raíz debe ser exactamente como deseas que aparezca en cada diseño en el que planeas agregar este diseño.

Usa la etiqueta <include>

Dentro del diseño en el que deseas agregar el componente reutilizable, agrega la etiqueta <include>. Por ejemplo, a continuación, hay un diseño que incluye la barra de título del ejemplo anterior:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

También puedes anular todos los parámetros de diseño (cualquiera de los atributos android:layout_*) de la vista raíz del diseño incluido. Para ello, especifícalos en la etiqueta <include>. Esto se muestra en el siguiente ejemplo:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

Sin embargo, si deseas anular los atributos de diseño con la etiqueta <include>, también anula android:layout_height y android:layout_width para que los otros atributos de diseño tengan efecto.

Usa la etiqueta <merge>

La etiqueta <merge> ayuda a quitar los grupos de vistas redundantes en la jerarquía de vistas cuando se incluye un diseño dentro de otro. Un caso de uso de <merge> es cuando implementas una vista personalizada extendiendo un ViewGroup.

Por ejemplo, si el diseño principal es un LinearLayout vertical en el que se pueden volver a usar dos vistas consecutivas en varios diseños, el diseño reutilizable en el que colocas las dos vistas requiere su propia vista raíz. Sin embargo, usar otro LinearLayout como raíz para el diseño reutilizable genera un LinearLayout vertical dentro de un LinearLayout vertical. El LinearLayout anidado no tiene un propósito real y ralentiza el rendimiento de la IU.

En su lugar, puedes extender un LinearLayout para crear una vista personalizada y usar un diseño XML para describir las vistas secundarias. La etiqueta superior del XML es <merge>, en lugar de LinearLayout, como se muestra en el siguiente ejemplo:

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

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

Cuando incluyes este diseño en otro diseño (con la etiqueta <include>), el sistema ignora el elemento <merge> y coloca los dos botones directamente en el diseño, en lugar de la etiqueta <include>.

Para obtener más información sobre <include>, consulta Recurso de diseño.