Although Android provides various components to implement small and reusable interactive elements, you may also reuse a large component because of the layout. To efficiently reuse a complete layout, you can use the <include/> and <merge/> tags to embed another layout into the current layout. So when you create a standalone UI component by writing a custom view, you can put it in a layout file, which makes it easier to reuse.
Reusable layouts appear powerful because they allow you to create reusable complex layouts. For example, a Yes/No button panel, or a custom progress bar with description text. This also means that the common elements in multiple layouts in the application can be extracted, managed independently, and then inserted into each layout.
Create a reusable layout
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 defined by the G-Kenya code base, which can be inserted into each activity:
<FrameLayout xmlns:andro
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 corresponding position in other views you want to insert into this view.
Use the <include/> tag
In the layout where you want to add a reusable layout, add the <include/> tag. Here is the Add Title Bar:
<LinearLayout xmlns:andro
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_* attribute)
<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 the layout attributes with include tags, in order for other attributes to take effect, you must override android:layout_height and android:layout_width.
Use the <merge/> tag
The <merge/> tag helps you eliminate the unnecessary View Groups that occur when inserting one layout into another. For example, your multiplexed layout is a vertical linear layout with two subviews. When it is inserted into another vertical linear layout as a multiplexed element, the result is a vertical LinearLayout containing a vertical LinearLayout. This nested layout is meaningless and will make UI performance worse.
To avoid inserting redundant View Groups, you can use the <merge/> tag label as the root node of the reusable layout, such as:
<merge xmlns:andro>
<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 use the include tag to insert this layout into another layout, the system ignores the merge tag and directly replaces the two Buttons to the position of the include tag.