include

include

Although Android offers a variety of widgets to provide small and re-usable interactive elements, you might also need to re-use larger components that require a special layout. To efficiently re-use complete layouts, you can use the <include/> and <merge/> tags to embed another layout inside the current layout.

Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. It also means that any elements of your application that are common across multiple layouts can be extracted, managed separately, then included in each layout. So while you can create individual UI components by writing a custom View, you can do it even more easily by re-using a layout file.

Use the <include> Tag

Inside the layout to which you want to add the re-usable component, add the <include/> tag.

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

You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the<include/> tag. For example:

<include android:id="@+id/news_title"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         layout="@layout/title"/>

Example -

activity_main.xml

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

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/LinearLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#FF550D"

    >

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="first layout"

    android:textSize="30dp"

    />

    <include

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        layout="@layout/layout1"

        />



</LinearLayout>

layout1

<?xml version="1.0" encoding="utf-8"?>

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

    android:orientation="vertical" android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#0ED0FF"

    >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is another layout."

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is another layout."

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is another layout."

        />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is another layout."

        />





</LinearLayout>

Merge Tag

The <merge /> tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. For example, if your main layout is a vertical LinearLayout in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view. However, using another LinearLayout as the root for the re-usable layout would result in a vertical LinearLayout inside a vertical LinearLayout. The nested LinearLayout serves no real purpose other than to slow down your UI performance.

Example -

activity_main.xml

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

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/LinearLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#FF550D"

    >

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="first layout"

    android:textSize="30dp"

    />

    <include

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        layout="@layout/layout1"

        />



</LinearLayout>

layout1

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



    <Button

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="add"/>



    <Button

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="delete"/>



</merge>

Now, when you include this layout in another layout (using the <include/> tag), the system ignores the <merge> element and places the two buttons directly in the layout, in place of the <include/> tag.