Compound controls are atomic, reusable widgets that contain multiple child controls laid out and wired together.

When you create a compound control, you define the layout, appearance, and interaction of the Views it contains. Compound controls are created by extending a ViewGroup (usually a Layout Manager). To

create a new compound control, choose a layout class that’s most suitable for positioning the child con-trols, and extend it as shown in the skeleton code below:

public class MyCompoundView extends LinearLayout {

public MyCompoundView(Context context) {

super(context);

}

public MyCompoundView(Context context, AttributeSet attrs) { super(context, attrs);

}

}

As with an Activity, the preferred way to design the UI for a compound control is to use a layout resource. The following code snippet shows the XML layout definition for a simple widget consisting of an Edit Text box and a button to clear it:

<?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=”fill_parent”>

<EditText

android:id=”@+id/editText”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

/>

<Button

android:id=”@+id/clearButton”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”Clear”

/>

</LinearLayout>

To use this layout for your new widget, override its constructor to inflate the layout resource using the inflate method from the LayoutInflate system service. The inflate method takes the layout resource and returns an inflated View. For circumstances such as this where the returned View should be the class you’re creating, you can pass in a parent and attach the result to it automatically, as shown in the next code sample.

The following code snippet shows the ClearableEditText class. Within the constructor it inflates the layout resource created above and gets references to each of the Views it contains. It also makes a call to hookupButton that will be used to hookup the clear text functionality when the button is pressed.

public class ClearableEditText extends LinearLayout {

EditText editText;

Button clearButton;

public ClearableEditText(Context context) {
super(context);

Inflate the view from the layout resource. String infService = Context.LAYOUT_INFLATER_SERVICE; LayoutInflater li;

li = (LayoutInflater)getContext().getSystemService(infService); li.inflate(R.layout.clearable_edit_text, this, true);

Get references to the child controls.

editText = (EditText)findViewById(R.id.editText); clearButton = (Button)findViewById(R.id.clearButton);

Hook up the functionality hookupButton();

}

}

If you’d prefer to construct your layout in code, you can do so just as you would for an Activity. The fol-lowing code snippet shows the ClearableEditText constructor overridden to create the same UI as is defined in the XML used in the earlier example:

public ClearableEditText(Context context) {

super(context);

Set orientation of layout to vertical setOrientation(LinearLayout.VERTICAL);

Create the child controls.

editText = new EditText(getContext());

clearButton = new Button(getContext());

clearButton.setText(“Clear”);

Lay them out in the compound control. int lHeight = LayoutParams.WRAP_CONTENT; int lWidth = LayoutParams.FILL_PARENT;

addView(editText, new LinearLayout.LayoutParams(lWidth, lHeight)); addView(clearButton, new LinearLayout.LayoutParams(lWidth, lHeight));

Hook up the functionality hookupButton();

}

Once the screen has been constructed, you can hook up the event handlers for each child control to pro-vide the functionality you need. In this next snippet, the hookupButton method is filled in to clear the textbox when the button is pressed:

private void hookupButton() {

clearButton.setOnClickListener(new Button.OnClickListener() {

public void onClick(View v) {

editText.setText(“”);

}

});

}