Improve layout performance: Use include and merge.

  • Written by  Clive

Save time and the environment (just kidding), re-use your layouts

Android Layouts include and merge layouts icon

Don’t duplicate your layouts, use the <include> tag

If you have a layout that you want to appear on a number of screens, you can create it once and re-use it for each screen.

It’s easy to include layouts in other layouts:

  • Simply create the layout file that you want to re-use
  • Then in the layout where you want your included layout to appear, add it using the <include> tag

Here’s an example of an activity layout which includes another layout:

Android Layouts include and merge screenshot Include

The text, image and blue background are defined in an XML layout file, include_me.xml which we include in this activity’s layout. The button is defined in the activity’s layout

Android Layouts include and merge include Xml

This is what the XML code for the include_me.xml layout file looks like; it’s a normal layout file

Android Layouts include and merge include image

This is what the include_me.xml layout looks like on a screen

Android Layouts include and merge mainActivity Include

We simply use the above code to include the include_me.xml layout in another layout

You can change the look of the included layout by overriding any of the layout parameters. Here’s an example:

Android Layouts include and merge includeSmall

This is what it looks like after we’ve included it and changed the layout attributes

Android Layouts include and merge secondActivityInclude

This is the code for including the layout and changing its layout attributes

Don’t repeat yourself, use the <merge> tag

Using merge reduces the number of views in your layouts when you include other layouts.

Here’s an example.

Let’s say that you have a layout, call it main_layout, with a LinearLayout as its root view. You also have a layout, include_layout that you want to include in the main_layout. It also has a LinearLayout as its root view.

Now when you include it, there will be two LinearLayouts in the main-layout. The second LinearLayout doesn’t serve any purpose as the main_layout’s LinearLayout takes care of arranging the views. The extra LinearLayout only slows the app up and wastes scarce resources.

Using <merge> as the root view of your included file solves the problem.

When the included file is inflated in the main_layout, the merge tag is ignored and the views are inserted in the main_layout as if they were part of that layout.

The main_layout’s LinearLayout places them in the correct position on the screen.

Here’s an example of a <merge> layout:

Android Layouts include and merge mergeXml

Our merge_me.xml layout that we want to reuse has a <merge> element as its root view. The <merge> tag is ignored when the layout is included in another layout

This is what the views would look like:

Android Layouts include and merge mergeMixed

The views are all on top of each other as the <merge> element does not supply a visual structure

This is what the included file would look like when included in another layout which has a vertical LinearLayout as the root view:

Android Layouts include and merge mergeFormatted

The included merge layout’s views are structured by the parent layout’s LinearLayout

This is the end result of including the two layouts:

Android Layouts include and merge screenshotMerge

This activity’s layout includes the include_me (top) and the merge_me (bottom) layouts

I hope that you have found this tutorial helpful.