Include-Merge Example in Android

This example will explain how to reuse the same layouts which is used in many layout files such as the footer used on each screen in many applications. We can do this by using include and merge tags. It basically means that include tag takes that file and paste it’s contents here. The include tag as the name suggests is more like the one in JSP, HTML or other languages. It takes another layout and includes that in the current layout.

Merge tag explains The layout which we have to use must be enclosed under merge tag, so that we can include layouts from other xml. The tag was created for the purpose of optimizing Android layouts by reducing the number of levels in view trees. Use the merge tag instead of linearLayout as a root tag around your layout elements if you are going to include that in another layout.

Rewriting the same code in each xml file will consume much more time and reduce the efficiency of the application.
Also reusing code will make the code clean, easier to understand and hence easy to debug.

Let us see how include tag works. For example we have the following header.xml file to use as a header in every screen .

 

<?xml version="1.0" encoding="utf-8"?>
< merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
< merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout android:id="@+id/RelativeLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#40404A" android:baselineAligned="true" android:gravity="center_vertical" android:paddingBottom="2dip" android:paddingLeft="8dip" android:paddingRight="8dip" android:paddingTop="2dip" >
<ImageView android:id="@+id/back_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/back_button_image" />
<TextView android:id="@+id/screen_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="Home Screen" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="#ffffff" /> <ImageView android:id="@+id/team_logo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@drawable/logo" /> </RelativeLayout>
< /merge>

<merge />

 

 

The tag is used for the purpose of optimizing Android layouts by reducing the number of levels in view trees.

Suppose we want to include the above header file as a header in homescreen file of our application which displays a list of games. We can do it as follows

 

<?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" android:orientation="vertical" >
<include layout="@layout/header" />
<ListView android:id="@+id/games_list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:choiceMode="singleChoice" > </ListView>
< /LinearLayout>

 

 

Now we can take the references of the views used in header.xml by calling the method findViewById(int id) in the activity inflating the homescreen.xml and do whatever we want.

In this example we are going to use both include and merge tags to generate our complete layout. We have created the footer layout with merge tags as it will be used throughout the application and can be included in all pages. I

1.) Create and write following into footer.xml:

 

<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="@+id/Button11"
android:text="Button11"></Button>
<Button android:layout_below="@id/Button01"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/Button12" android:text="Button12"></Button>
</LinearLayout>
</merge>

 

 

2.) Write following into main.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:id="@+id/RelativeLayout02"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerInParent="true">
<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Next Activity "></Button>
</RelativeLayout>
<RelativeLayout android:id="@+id/RelativeLayout03"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<include layout="@layout/footer" />
</RelativeLayout>
</RelativeLayout>

 

 

3.) Write following into MainActivity class:

 

public class Splash extends Activity implements OnClickListener {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

findViewById(R.id.Button01).setOnClickListener(this);
findViewById(R.id.Button11).setOnClickListener(this);
findViewById(R.id.Button12).setOnClickListener(this);
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.Button01:
startActivity(new Intent(this, Act2.class));
break;
case R.id.Button11:
Toast.makeText(this, "Button 11 - Activity 1 ....",
Toast.LENGTH_SHORT).show();
break;
case R.id.Button12:
Toast.makeText(this, "Button 12 - Activity 1 ....",
Toast.LENGTH_SHORT).show();
break;
}
}

}

 

 

Output

includemerge1