Include and Merge Tags in Android with Example - GeeksforGeeks

05 Jul, 2021
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.
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" />
  
 
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
Description
To supply an identifier for the layout resource to 
include a custom layout in our main layout.
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.Bundleimport android.view.Viewimport android.widget.Buttonimport android.widget.ImageViewimport android.widget.Toastimport 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 reusued 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()        }    }}
  
 
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.
 
 
saurabh1990aror
Android-Misc
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters