Use the Include tag and merge tab to reuse layouts in Android _android

Although Android offers a variety of components for small, reusable interaction elements, you may also need to reuse a large component for the layout. To efficiently reuse the full layout, you can use the <include/> and <merge/> tags to embed another layout into the current layout. So when you create a standalone UI component by writing a custom view, you can put it in a layout file, which is easier to reuse.

The reuse layout is very powerful because it allows you to create complex layouts that can be reused. For example, a Yes/no button panel, or a custom progress bar with descriptive text. This also means that common elements in multiple layouts in an application can be extracted, managed independently, and inserted into each layout.

Create a reusable layout

If you already know which layout needs to be reused, create a new XML file to define the layout. For example, here is a layout that defines the title bar from the G-kenya code base, which can be inserted into each activity:

Copy Code code as follows:

<framelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Wrap_content"
android:background= "@color/TITLEBAR_BG" >

<imageview android:layout_width= "Wrap_content"
android:layout_height= "Wrap_content"
android:src= "@drawable/gafricalogo"/>
</FrameLayout>

The root view should be exactly where you are in the other views that you want to insert into this view.

Use <include/> label

Add <include/> tag in the layout where you want to add a reusable layout. The following is the Add title bar:

Copy Code code as follows:

<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 overwrite all layout parameters (Android:layout_* properties)

Copy Code code as follows:

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

However, if you want to overwrite layout attributes with include tags, you must overwrite Android:layout_height and android:layout_width for other attributes to take effect.

Use <merge/> label

<merge/> tags help you eliminate unwanted view when inserting a layout into another layout Group. For example, your multiplexed layout is a vertical linear layout that contains two child views, and when it is inserted into another vertical linear layout as a reused element, the result is a vertical linearlayout containing a vertical linearlayout. This nesting layout has no practical meaning and can make UI performance worse.

To avoid inserting a similar redundant view Group, you can use the <merge/> label label as the root node for reusable layouts, such as:

Copy Code code as follows:

<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 use the Include tag to insert this layout into another layout, the system ignores the merge label and replaces the two button directly with the Include label location.