Android USES the include tag and the merge tag to reuse the layout

  • 2020-06-01 11:00:36
  • OfStack

Although Android provides various components to implement small and reusable interaction elements, you may also need to reuse a large component because of the layout. For efficient reuse of complete layouts, you can use < include/ > and < merge/ > Tag inserts another layout into the current layout. So when you create a separate UI component by writing a custom view, you can put it in a layout file, which is easier to reuse.

Reusable layouts are powerful because they allow you to create complex layouts that can be reused. For example, a yes/no button panel, or a custom progress bar with descriptive text. This also means that common elements of multiple layouts in an application can be extracted, managed independently, and inserted into each layout.

Create reusable layouts

If you already know which layout needs to be reused, create a new xml file to define the layout. For example, here is a layout from the G-Kenya code base defining the title bar, which can be inserted into each Activity:


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= " match_parent "
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">
 
    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

The root view should be exactly the same as the one you are inserting into the other view.

use < include/ > The label

In the layout you want to add a reusable layout, add < include/ > The label. Here's how to add the title bar:


<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/titlebar"/>
 
    <TextView android:layout_width= " match_parent "
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
 
    ...
 
</LinearLayout>

You can also override all layout parameters (android:layout_* property)


<include android:id= " @+id/news_title "
         android:layout_width= " match_parent "
         android:layout_height= " match_parent "
         layout= " @layout/title " />

However, if you want to override layout properties with the include tag, you must override android:layout_height and android:layout_width in order for other properties to take effect.

use < merge/ > The label

< merge/ > Tags help you eliminate inserted the 1 layout to another one when the layout of redundant View Group. Such as, you be reused layout is a vertical linear layout, contains two child views, when it as 1 be reused elements are inserted into the other one vertical linear layout, the result is 1 vertical LinearLayout contains 1 vertical LinearLayout. This nested layout makes no real sense and will degrade the performance of UI.

To avoid inserting similarly redundant View Group, you can use < merge/ > The tag tag ACTS as the root node of the reusable layout, such as:


<merge xmlns:android="http://schemas.android.com/apk/res/android">
 
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>
 
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>
 
</merge>

Now, when you insert this layout into another layout using the include tag, the system ignores the merge tag and simply replaces the two Button tags with the include tag.


Related articles: