Although Android offers a variety of widgets to provide small and reusable interactive elements,
you might also need to reuse larger components that require a special layout. To efficiently
reuse complete layouts, you can use the
to embed another layout inside the current layout.
Reusing layouts is particularly powerful as it allows you to 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 reusing a layout file.
Create a reusable layout
If you already know the layout that you want to reuse, create a new XML file and define the
layout. For example, here's a layout that defines a title bar to be
included in each activity (
<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>
View should be exactly how you'd like it to appear in each
layout to which you add this layout.
in the XML above is a special attribute that is removed during compilation and used only at design
time in Android Studio—it specifies a layout that includes this file, so you can preview
(and edit) this file as it appears while embedded in a parent layout.
Use the <include> tag
Inside the layout to which you want to add the reusable component, add the
<include/> tag. For example, here's a layout
that includes the title bar from above:
Here's the layout file:
<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. For
<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
<include> tag, you must override both
android:layout_width in order for
other layout attributes to take effect.
Use the <merge> tag
<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 reused in multiple
layouts, then the reusable layout in which you place the two views requires its own root view.
However, using another
LinearLayout as the root for the reusable 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.
To avoid including such a redundant view group, you can instead use the
<merge> element as the root view for the reusable layout. For 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>
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
For further information related to this topic, see Layout resources.