Asynchrony Solutions Blog

How to Reuse UI Components Using XML Layouts and the Inflater Service

by Matt Todd on February 28th, 2011 at 3:46 pm

Creating UI components for Android apps programmatically is difficult.  So, the Android framework provides a way to create UI components via XML.  The Eclipse Android SDK actually provides a tool for creating these XML UIs via drag-and-drop/WYSIWYG.  Now developers must manage XML documents along with their Java code, which can also be difficult.  To help alleviate some of these difficulties, the Android framework allows for reusing the XML views via the Inflater Service.

First, let’s define some UI components in XML.

The first XML layout will be the main layout that will be the base of the UI shown to the user. This could also be reused for all the screens as it is just an empty LinearLayout.

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/main_layout" android:orientation="vertical"
          android:layout_width="fill_parent" android:layout_height="fill_parent">
     <TextView android:text="@string/title" android:layout_width="fill_parent"
               android:layout_height="wrap_content" />
</LinearLayout>

The second XML layout will be used for some text fields for a simple form.

res/layout/personnel_form.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical" android:layout_width="fill_parent"
          android:layout_height="wrap_content">
     <LinearLayout android:orientation="horizontal"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content">
          <TextView android:text="@string/firstname_label"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content" />
          <EditText android:id="@+id/firstname"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" />
     </LinearLayout>
     <LinearLayout android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content">
          <TextView android:text="@string/lastname_label"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content" />
          <EditText android:id="@+id/lastname"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" />
     </LinearLayout>
</LinearLayout>

The final XML layout will be an OK and Cancel button that could be reused for a number of other screens.

res/layout/buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_height="wrap_content" android:orientation="horizontal"
          android:layout_width="fill_parent">
     <Button android:id="@+id/ok_button" android:text="@string/ok"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" android:layout_weight="1" />
     <Button android:id="@+id/cancel_button" android:text="@string/cancel"
               android:layout_height="wrap_content"
               android:layout_width="fill_parent" android:layout_weight="1" />
</LinearLayout>

Now we get down to obtaining and using an instance of the Inflater Service in the Activity.  To do this, we simply use the getSystemService() method giving it the name of the Inflater Service.

LayoutInflater inflater = (LayoutInflater) context.
     getSystemService(Context.LAYOUT_INFLATER_SERVICE);

Once you have an instance of the Inflator Service, you can call the inflate method giving it the XML layout that you want to use and the root view that you want to append it to.

LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main_layout);
inflater.inflate(R.layout.personnel_form, mainLayout)

And finally putting it all together, here’s the Activity…

public class MyTestActivity extends Activity {
     @Override
     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);

          LayoutInflater inflater = (LayoutInflater)
               getSystemService(LAYOUT_INFLATER_SERVICE);

          LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main_layout);
          inflater.inflate(R.layout.personnel_form, mainLayout);
          inflater.inflate(R.layout.buttons, mainLayout);

          Button okButton = (Button) findViewById(R.id.ok_button);
          okButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                    EditText firstNameText = (EditText) findViewById(R.id.firstname);
                    EditText lastNameText = (EditText) findViewById(R.id.lastname);

                    String message = "Hello, " + firstNameText.getText() + " " +
                         lastNameText.getText() + "!";
                    Toast.makeText(MyTestActivity.this, message, Toast.LENGTH_LONG).
                         show();
               }
          });

          Button cancelButton = (Button) findViewById(R.id.cancel_button);
          cancelButton.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                    MyTestActivity.this.finish();
               }
          });
     }
}

Using this technique, you will be able to reuse portions of UI components for various screens in your Android application.

Tags: android, development, java, ui, XML