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.
<!-- 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).
< 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.
< LinearLayout
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.
< 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.
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.