Use include and merge tag to make reusable view components in android

anchit

21 September 2018

In this blog, we will learn how we can use include and merge tag to make reusable view components in android.

Coding in Android is pretty fun, especially when you are doing it in the right way.

We all want to keep the XML layout changes to a minimum when it comes to developing similar applications.

For this purpose, we develop many things like library modules, layout components etc. that can ease out our development process.

Although the android has provided us with many small and interactive reusable widgets and views to ease out development.

But many times we need to have many larger elements like forms repeated as per our need.

Implementing this is quite easy if you know how to exactly do this, of course, one way is to have a custom view and keep on inflating the same in all the XML as per our need, but an easier approach would be extracting the UI parts as per need and inflating them in the XML through include tag only.

Let’s see how to use the include tag first :

Step1: Create a re-usable layout

let’s just say we name this component to be my_form and it contains two buttons.

       <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/add_button"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/add"/>

            <Button
                android:id="@+id/delete_button"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/delete"/>
        </FrameLayout>

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/add_button"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/add"/>

<Button

android:id="@+id/delete_button"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/delete"/>

</FrameLayout>

Step2: Include this re-usable layout using <include/> tag

Let’s say we want to include this layout in our main_layout.xml file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">
    ... 

    <include layout="@layout/my_form"/>

    ...

</LinearLayout>

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

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/app_bg"

android:gravity="center_horizontal">

...

...

</LinearLayout>

You can also override all the layout parameters (any android:layout_* attributes) of the included layout’s root view by specifying them in the <include/> tag. For example:

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

<include

android:id="@+id/news_form"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

layout="@layout/my_form"

Now, this was pretty simple and we have successfully added the UI component.

This is what most of us do usually and there is nothing wrong with it until we add many <include> in our layout files as in this approach we have ignored the usage of the FrameLayout which serves no great purpose than to be a container but this each additional view group container adds a redundant view group in the view hierarchy which can indeed slow down your UI performance. For cases like these and to eliminate the redundant view group we should use the merge tag.

The <merge/> Tag

The <merge /> tag helps eliminate redundant view groups in your view hierarchy when including one layout within another. For example, if your main layout is a vertical LinearLayout in 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 LinearLayout as the root for the re-usable layout would result in a vertical LinearLayout inside a verticalLinearLayout. The nested LinearLayout serves no real purpose other than to slow down your UI performance.

To avoid including such a redundant view group, you can instead use the <merge> element as the root view for the re-usable layout.

–developer.android.com/ Official docs

Now let’s have a look at what all and where do we need to make these changes to optimize this and use the merge tag.

The only place where we need to change is the reusable layout parent group container that we created in the step1.

So, our modified re-usable layout file would be :

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

            <Button
                android:id="@+id/add_button"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/add"/>

            <Button
                android:id="@+id/delete_button"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/delete"/>
        </merge>

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

xmlns:tools="http://schemas.android.com/tools" >

<Button

android:id="@+id/add_button"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/add"/>

<Button

android:id="@+id/delete_button"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/delete"/>

</merge>

And that’s how you can use the include and merge tag.

Hope this will help you in understanding include and merge tags and their usage.

Keep coding and Keep Sharing 🙂

Sources and Credits: https://developer.android.com