Reutilizar layouts com <include>

Embora o Android ofereça uma variedade de widgets para fornecer elementos interativos pequenos e reutilizáveis, talvez também seja necessário reutilizar componentes maiores que exijam um layout especial. Para fazer isso com eficiência, use as tags <include> e <merge>, incorporando outro layout ao atual.

A reutilização de layouts é particularmente eficiente, porque permite criar layouts complexos reutilizáveis. Por exemplo, um painel de botões sim/não ou uma barra de progresso personalizada com texto de descrição. Isso também significa que qualquer elemento do seu app que seja comum em vários layouts pode ser extraído, gerenciado separadamente e depois incluído em cada layout. Embora seja possível criar componentes de IU individuais gravando uma View personalizada, você pode fazer isso com ainda mais facilidade reutilizando um arquivo de layout.

Criar um layout reutilizável

Se você já conhece o layout que quer reutilizar, crie um novo arquivo XML para fazer a definição dele. Por exemplo, este é um layout que define uma barra de título a ser incluída em cada atividade (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>

A View raiz precisa ser exatamente como você quer que ela apareça em cada layout ao qual você adicionar esse.

Observação: o tools:showIn do XML acima é um atributo especial que é removido durante a compilação e usado apenas no momento do design no Android Studio. Ele especifica um layout que inclui esse arquivo para que você possa visualizar (e editar) o arquivo, já que ele é mostrado quando incorporado a um layout pai.

Usar a tag <include>

Dentro do layout ao qual você quer adicionar o componente reutilizável, adicione a tag <include>. Por exemplo, veja um layout que inclui a barra de título acima.

Este é o arquivo de layout:

<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>

Você também pode modificar todos os parâmetros de layout (qualquer atributo android:layout_*) da visualização raiz do layout incluído os especificando na tag <include>. Por exemplo:

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

No entanto, se você quiser substituir os atributos usando a tag <include>, substitua android:layout_height e android:layout_width para que outros atributos de layout entrem em vigor.

Usar a tag <merge>

A tag <merge> ajuda a eliminar grupos de visualizações redundantes da sua hierarquia ao incluir um layout dentro de outro. Por exemplo, se o seu layout principal for um LinearLayout vertical em que duas visualizações consecutivas podem ser reutilizadas em vários layouts, o reutilizável em que as visualizações serão colocadas vai exigir a própria visualização raiz. No entanto, usar outro LinearLayout como raiz do layout reutilizável resultaria em um LinearLayout vertical dentro de outro. O LinearLayout aninhado não tem nenhuma finalidade real além de deixar a performance da IU lenta.

Para evitar a inclusão de uma visualização em grupo redundante, use o elemento <merge> como a visualização raiz do layout reutilizável. Exemplo:

<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>

Agora, quando você incluir esse layout em outro, usando a tag <include>, o sistema vai ignorar o elemento <merge> e colocar os dois botões diretamente no layout, no lugar de <include>.

Para mais informações relacionadas a este tópico, consulte Recursos de layout.