Include and Merge Tags in Android with Example

Android apps are growing and one important aspect of it is reusability. Sometimes, the complexity of app design will be more and during that time, Android providing very efficient reusable features by means of the <include/> and <merge/> tags. Under <merge/> tags, we can specify a part of the layout that has to come in the main layout. It is similar to the main layout having Button, TextView, etc., It can be specified in a meaningful android naming convention XML file. eg: custom_layout.xml. In the main layout, we can reuse custom_layout by using the <include/> tag. The main advantage is many app pages may need custom_layout contents and wherever necessary, there it can be included easily by using the <include/> tag. And also in case of modifications, it is a one place change and hence maximum rework is avoided/reduced. Generally used in the idea of customization, reusability of app contents by using <include/> and <merge/> tags.

Include Tag

This is used to include the contents of reusable content. This is a very good idea of sharing the contents of another layout in the main layout.

XML

<!-- custom_layout is a separate layout xml file
     which can be shared, reused in many places-->
<include
  android:id="@+id/custom_layout"
  layout="@layout/custom_layout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

Merge Tag

The <merge /> tag helps us to eliminate redundant view groups in our view hierarchy when including one layout within another. Hence in our example, directly we have android elements like Button and ImageView as this is going to get included in the main view and it will take the layout specified in the main file i.e. activity_main.xml(main layout file). 

XML

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

    <Button
        android:id="@+id/ButtonToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="Button is under merge tag"
        android:textColor="#fff"
        android:textSize="18sp"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/imageViewToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/cryptocurrency" />

</merge>

Note: We can find that <include/> and <merge/> tags look similar to ViewStub but it is not. 

• The ViewStub tag is a little bit different because it is not directly included, and will be loaded only when you actually need it, i.e when you set ViewStub’s visibility to “true”.
• But include and merge tags are directly included and loaded at the beginning itself and mainly helpful for splitting of layouts and reusing them wherever necessary.

Attributes of Include

Attributes	Description
id	To uniquely identify an include tag
layout	To supply an identifier for the layout resource to  include a custom layout in our main layout.

Example

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="100dp"
        android:text="Main Layout Text"
        android:textColor="@color/colorAccent"
        android:textSize="20sp" />

    <include
        android:id="@+id/custom_layout"
        layout="@layout/custom_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Step 3: Create a new Layout Resource File

Go to the app > res > layout > right-click > New > Layout Resource File and name the file as custom_layout. Below is the code for the custom_layout.xml and the file should be present with merge contents. 

XML

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

    <Button
        android:id="@+id/ButtonToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="Button is under merge tag"
        android:textColor="#fff"
        android:textSize="18sp"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/imageViewToInclude"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/cryptocurrency" />

</merge>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    var customButton: Button? = null
    var customImageView: ImageView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // As custom layout contents are included, we can refer them as normal way
        // Main advantage lies here only. even this custom_layout can be reused in different xml
        // and in corresponding activity file, they can be referred and there may be a
        // different functionality can be carried out.
        // get the reference of custom Layout's Button
        customButton = findViewById<View>(R.id.ButtonToInclude) as Button

        // get the reference of custom Layout's ImageView
        customImageView = findViewById<View>(R.id.imageViewToInclude) as ImageView

        // We have clicked on Custom layout button, though it is in separate xml
        // because of include tag, it is getting focus here and we can do
        // activities as we like
        customButton!!.setOnClickListener {
            Toast.makeText(applicationContext, "We have clicked on Custom layout button", Toast.LENGTH_LONG).show()
        }
    }
}

Running the Code on the Emulator

We can able to get the output as attached in the video. Apply <include/> and <merge/> tag wherever necessary and enjoy the reusability feature of android apps.