Although Android offers a variety of widgets to provide small, reusable, interactive elements,
you might also need to reuse larger components that require a special layout. To efficiently reuse
complete layouts, use the <include>
and <merge>
tags to embed
one layout inside another.
This lets you create complex layouts—such as a yes or no button panel or a custom progress
bar with description text. And it means that you can extract any elements of your application that
are common across multiple layouts, manage them separately, and include them in each layout. While
you can create individual UI components by writing a custom
View
, you can do it more easily by
reusing a layout file.
Create a reusable layout
Start by creating a new XML file and defining the layout you want to be able to reuse. For
example, here's a layout that defines a title bar to include in each activity
(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>
The root View
must be exactly how you want it to appear in each
layout where you plan to add this layout.
Use the <include> tag
Inside the layout where you want to add the reusable component, add the
<include>
tag. For example, here's a layout that includes the title bar from
the preceding example:
<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>
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. This is shown in the following example:
<include android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="match_parent" layout="@layout/title"/>
However, if you want to override layout attributes using the <include>
tag,
also override android:layout_height
and android:layout_width
to make the
other layout attributes take effect.
Use the <merge> tag
The <merge>
tag helps eliminate redundant view groups in your view hierarchy
when including one layout within another. One use case of <merge>
is when you
implement a custom view by extending a ViewGroup
.
For example, if your main layout is a vertical
LinearLayout
in which two
consecutive views can be reused in multiple layouts, then the reusable layout where you place the
two views requires its own root view. However, using another LinearLayout
as the root
for the reusable layout results in a vertical LinearLayout
inside a vertical
LinearLayout
. The nested LinearLayout
serves no real purpose and slows
down your UI performance.
Instead, you can extend a LinearLayout
to create a custom view and use a layout XML
to describe its child views. The top tag in the XML is <merge>
, rather than
LinearLayout
, as shown in the following example:
<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>
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.
For more information about <include>
, see
Layout resource.