Reutilizar layouts com <include>

Experimente trabalhar com o Compose

O Jetpack Compose é o kit de ferramentas de IU recomendado para Android. Aprenda a trabalhar com layouts no Compose.

Layouts baseados em slots →

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 reutilizar layouts completos com eficiência, use as tags <include> e <merge> para incorporar um layout dentro de outro.

Isso permite criar layouts complexos, como um painel de botões "sim" ou "não" ou uma barra de progresso personalizada com texto de descrição. Isso significa que você pode extrair qualquer elemento do seu aplicativo que seja comum em vários layouts, gerenciá-los separadamente e incluí-los em cada layout. Embora seja possível criar componentes de IU individuais gravando uma View personalizada, você pode fazer isso com mais facilidade reutilizando um arquivo de layout.

Criar um layout reutilizável

Comece criando um novo arquivo XML e definindo o layout que você quer reutilizar. Por exemplo, veja 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 atributo no arquivo XML anterior é um atributo especial usado apenas no momento do design no Android Studio e removido durante a compilação. 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 <include> tag. Por exemplo, veja um layout que inclui a barra de título do exemplo 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>

Você também pode modificar todos os parâmetros de layout (qualquer android:layout_* atributos) da visualização raiz do layout incluído especificando-os na <include> tag. Isso é mostrado neste 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 de layout usando a tag <include>, substitua também android:layout_height e android:layout_width para que os 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 de visualização ao incluir um layout dentro de outro. Um caso de uso de <merge> é quando você implementa uma visualização personalizada estendendo um ViewGroup.

Por exemplo, se seu layout principal for um LinearLayout vertical em que duas visualizações consecutivas podem ser reutilizadas em vários layouts, o layout reutilizável em que as visualizações serão colocadas exigirá a própria visualização raiz. No entanto, usar outro LinearLayout como raiz do layout reutilizável resulta em um LinearLayout vertical dentro de outro LinearLayout vertical. O LinearLayout aninhado não serve para nenhuma finalidade real e torna o desempenho da IU lento.

Em vez disso, você pode estender um LinearLayout para criar uma visualização personalizada e usar um layout XML para descrever as visualizações filhas. A tag superior no XML é <merge>, em vez de LinearLayout, conforme mostrado no exemplo a seguir:

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

Quando você inclui esse layout em outro (usando a <include> tag), o sistema ignora o <merge> elemento e coloca os dois botões diretamente no layout, no lugar da <include> tag.

Para mais informações sobre <include>, consulte Recurso de layout.