Android include and merge layout example

How to use the <include> and <merge> tags in Android to create efficient and reusable layouts

The include tag as the name suggests is more like the one in JSP, HTML or other languages. It takes another layout and includes that in the current layout.The <merge /> tag was created for the purpose of optimizing Android layouts by reducing the number of levels in view trees. Use the merge tag instead of linearLayout as a root tag around your layout elements if you are going to include that in another layout.

In this example we are going to use both include and merge tags to generate our complete layout. We have created the header and the footer layouts with merge tags as they will be used throughout the application and can be included in all pages. In addition to that we have created another layout that will be merged programmatically in the activity by inflating the layout. 

Application Layout source - main.xml

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

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

 android:layout_width="fill_parent" android:layout_height="fill_parent"

 android:orientation="vertical">

 <include android:layout_width="wrap_content"

  android:layout_height="wrap_content" layout="@layout/header" />

 

 <TextView android:layout_width="fill_parent"

  android:layout_height="wrap_content" android:text="@string/hello"

  android:textSize="20sp" />

 

 

 <LinearLayout

     android:id="@+id/linearLayout1"

     android:layout_width="match_parent"

     android:layout_height="wrap_content"

     android:layout_marginTop="10dp"

     android:layout_weight="1"

     android:orientation="vertical" >

 

 </LinearLayout>

 

 

 <include android:layout_width="wrap_content"

  android:layout_height="wrap_content" layout="@layout/footer"

  android:layout_gravity="right" />

 

</LinearLayout>

Application Header source - header.xml

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

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

 

 <TextView

     android:id="@+id/textView1"

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:paddingBottom="10dp"

     android:text="My Application Header"

     android:layout_gravity="center_horizontal"

        android:textAppearance="?android:attr/textAppearanceMedium" />

 

</merge>

Application Footer source - footer.xml

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

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

 

 

 <TextView

     android:id="@+id/textView1"

     android:layout_width="wrap_content"

     android:layout_height="wrap_content"

     android:layout_gravity="right"

     android:text="My Application Footer"

     android:textAppearance="?android:attr/textAppearanceSmall" />

 

</merge>

Application Item Detail source - item.xml

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

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

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Item Number"

        android:textAppearance="?android:attr/textAppearanceMedium" />

 

    <EditText

        android:id="@+id/editText1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

   </EditText>

 

 

</merge>

Activity source - AndroidIncludeActivity.java

package com.as400samplecode;

 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.LinearLayout;

 

public class AndroidIncludeActivity extends Activity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

     

        LinearLayout myLayout = (LinearLayout)findViewById(R.id.linearLayout1);

        View itemInfo1 = getLayoutInflater().inflate(R.layout.item, myLayout, true);

        View itemInfo2 = getLayoutInflater().inflate(R.layout.item, myLayout, true);

        View itemInfo3 = getLayoutInflater().inflate(R.layout.item, myLayout, true);

         

    }