{"id":1864,"date":"2016-05-23T11:26:21","date_gmt":"2016-05-23T11:26:21","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1864"},"modified":"2019-06-12T09:50:51","modified_gmt":"2019-06-12T09:50:51","slug":"include-merge-tag","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/include-merge-tag","title":{"rendered":"Include Merge Tag Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, for reusing the complete layouts we can use the <include\/><\/code> and <merge\/><\/code> tags to embed another layout inside the current layout. Android offers a variety of widgets to provide small and reusable interactive elements. In some cases\u00a0we might also need to reuse larger components that require a special layout.<\/p>\n

\"Include<\/p>\n

Reusing layouts is powerful as it allows us to create reusable complex layouts. It also means that any elements of our application that are common across multiple layouts can be extracted, managed separately and then included in each layout. For example, in many\u00a0cases we need custom title bar with description text and icon, then we can create a custom title bar layout and use this tag (i.e.\u00a0<include\/> and <merge\/>) to re-use the same layout in multiple activities.<\/p>\n

\n

Include Tag:<\/strong><\/h4>\n

The <include\/> tag helps us to\u00a0include the xml content\u2019s in our xml file. This is\u00a0a nice way to share layout parts between different layout\u2019s. Suppose we need to show\u00a0the custom title in many\u00a0layouts,\u00a0for that\u00a0we simply create a custom layout for title bar and then reuse the layout by using <include\/> tag.<\/p>\n

Basic\u00a0include Tag\u00a0XML code in Android:<\/strong><\/p>\n

<include android:id=\"@+id\/custom_title_layout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nlayout=\"@layout\/custom_title\"\/>\r\n<\/pre>\n
\n
Merge Tag:<\/strong><\/h4>\n
The\u00a0<merge \/>\u00a0tag helps us to eliminate redundant view groups in our view hierarchy when including one layout within another. For example, if our main layout is LinearLayout with vertical orientation\u00a0in which two consecutive views can be re-used in multiple layouts, then the re-usable layout in which you place the two views requires its own root view. However, using another\u00a0LinearLayout\u00a0as the root of the re-usable layout would result in a vertical LinearLayout\u00a0inside a vertical\u00a0LinearLayout. The nested\u00a0LinearLayout\u00a0serves no real purpose other than to slow down our UI performance. To avoid including such a redundant view group, we can instead use the\u00a0<merge>\u00a0element as the root view for the re-usable layout.<\/p>\n
Basic\u00a0merge Tag XML code:<\/strong><\/p>\n
<merge xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n\u00a0\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"First\"\/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:text=\"Second\"\/>\r\n\r\n<\/merge>\r\n<\/pre>\n
Now, when we include this layout in another layout (using the\u00a0<include\/>\u00a0tag), the system ignores the <merge>\u00a0element and places the two Buttons directly in the layout, in place of the\u00a0<include\/>\u00a0tag.<\/p>\n
\n
Difference between ViewStub and include tag:<\/strong><\/h4>\n
The include tag will just include the xml content\u2019s in our xml file. It\u2019s a nice way to share layout parts between different layout\u2019s. The ViewStub<\/a> 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\u2019s visibility to \u201ctrue\u201d. This is a nice optimization because you could have a complex layout with tons of small views, complex views or headers anywhere, and still have your Activity load up really fast. Once you use one of those views, it\u2019ll be loaded.<\/p>\n
\n
Attributes of include:<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a include tag that helps us to configure it in our layout (xml).<\/p>\n
1. id:<\/strong><\/span> This attribute is used to uniquely identify a include tag.<\/p>\n
Below we set the \u201ccustom_title_bar\u201d id of the include tag that is used to uniquely identify it.<\/p>\n
<include android:id=\"@+id\/custom_title_bar\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\/> <!-- id of the include tag that is used to uniquely identify it-->\r\n<\/pre>\n
2. layout:<\/strong><\/span> This attribute is used to supply an identifier for the layout resource to include a custom layout in our main layout.<\/p>\n
Below we include a custom layout i.e custom _title in our main layout using include tag.<\/p>\n
<include android:id=\"@+id\/custom_title_bar\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nlayout=\"@layout\/custom_title\"\/> <!-- include custom_title layout in other layout -->\r\n<\/pre>\n
\n
include and merge Tag Example In Android Studio:<\/h4>\n
Below is the example of include and merge tag in which firstly we create a custom layout with a ImageView and a Button by using merge tag and then include that layout in our main layout using include tag. Finally we access the custom layout\u2019s view\u2019s in our Activity and perform click event on Button. Whenever a user click on Button a toast with message \u201c Custom Layout\u2019s Button Clicked \u201d \u00a0displayed.<\/p>\n
Below you can download code, see final output and step by step explanation of the example:<\/p>\n
Download Code<\/a> ?<\/a><\/p>\n
\"include<\/p>\n
Step 1:<\/strong><\/span>\u00a0Create a new project and name it IncludeTagExample<\/p>\n
Step 2:<\/span>\u00a0<\/strong>Open res -> layout ->activity_main.xml (or) main.xml and add following code:<\/p>\n
In this step we open xml file and then create a TextView and also include a custom_layout file using include tag.<\/p>\n
<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\".MainActivity\">\r\n\r\n<TextView\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:text=\"Example Of Include And Merge Tag\"\r\nandroid:textColor=\"#00f\"\r\nandroid:layout_marginBottom=\"100dp\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<include\r\nandroid:id=\"@+id\/custom_layout\"\r\nlayout=\"@layout\/custom_layout\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
Step 3:<\/strong><\/span>\u00a0Create a new xml file i.e custom_layout.xml inside layout and add the below code:<\/p>\n
In this file we create a Button and a ImageView using merge tag to display in other activities.<\/p>\n
<merge xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n<Button\r\nandroid:id=\"@+id\/customButton\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:background=\"#00f\"\r\nandroid:text=\"Included Layout's Button\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"18sp\"\r\nandroid:textStyle=\"bold\" \/>\r\n\r\n<ImageView\r\nandroid:id=\"@+id\/customImageView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:src=\"@drawable\/ic_launcher\" \/>\r\n\r\n<\/merge>\r\n<\/pre>\n
Step 4:\u00a0<\/strong><\/span>Open\u00a0 \u00a0src -> package -> MainActivity.java<\/p>\n
In this step Firstly we get the reference of included layout\u2019s Button and ImageView and finally perform click event on Button. Whenever a user click on Button a toast with message \u201c Custom Layout\u2019s Button Clicked \u201d \u00a0displayed.<\/p>\n
package example.abhiandroid.includetagexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.widget.ImageView;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\nButton customButton;\r\nImageView customImageView;\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\ncustomButton = (Button) findViewById(R.id.customButton); \/\/ get the reference of custom Layout's Button\r\ncustomImageView = (ImageView) findViewById(R.id.customImageView); \/\/ get the reference of custom Layout's ImageView\r\ncustomButton.setOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View v) {\r\n\/\/ display a toast on Button Click\r\nToast.makeText(getApplicationContext(), \"Custom Layout\u2019s Button Clicked\", Toast.LENGTH_LONG).show();\r\n}\r\n});\r\n}\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
In Android, for reusing the complete layouts we can use the <include\/> and <merge\/> tags to embed another layout inside the current layout. Android offers a variety of widgets to provide small and reusable interactive elements. In some cases\u00a0we might also need to reuse larger components that require a special layout. Reusing layouts is powerful … Continue reading Include Merge Tag Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1864","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"Include Merge Tag Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"In Android, for reusing the complete layouts we can use the  and  tags to embed another layout inside the current layout. Android offers a variety of widgets to provide small and reusable interactive elements.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/include-merge-tag\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1864"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1864\/revisions"}],"predecessor-version":[{"id":2791,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1864\/revisions\/2791"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}