Reusing XML layouts in Android

Sometimes we need to put same header and/or footer on every screen of our application.

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.

Android provide us the <include/> tag to do this.

Let us see how it 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>

The<merge />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.xml file as a header in home_screen.xml file of our application which displayes 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>

Include tag simply puts contents of the header.xml at this place.

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 home_screen.xml and do whatever we want.

Noor Alam , Android App Developer, Mindfire Solutions.

Related Tags: Android, Layout Reuse

Author : Noor Alam

Reusing XML layouts in Android

Leave a Reply

Subscribe With Us