Creating Compound Controls

Compound controls are atomic, reusable Views 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. You create compound controls by extending a ViewGroup (usually a layout). To create a new compound control choose the layout class that's most suitable for positioning the child controls, and extend it as shown in Listing 4-6.

LISTING 4-6: Creating a compound control dtwntoatlMl public class MyCompoundView extends LinearLayout { Wrax.com public MyCompoundView(Context context) {

super(context);

Prepared for ASHLEE KABAT, email: [email protected] Order number: 56760408 This PDF is for the purchaser's personal use in accordance with the Wrox Terms of Service and under US copyright as stated on this book's copyright page. If you did not purchase this copy, please visit www.wrox.com to purchase your own copy.

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

As with Activities, the preferred way to design compound View layouts is using an external resource. Listing 4-7 shows the XML layout definition for a simple compound control consisting of an Edit Text View and a clear text Button to clear it.

LISTING 4-7: A compound View layout resource

Available for download on Wrox.com

<?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 View, override the View's constructor to inflate the layout resource using the inflate method from the Layoutlnflate system service. The inflate method takes the layout resource and returns the inflated View.

For circumstances such as this, in which the returned View should be the class you're creating, you can pass in the parent View and attach the result to it automatically, as shown in Listing 4-8.

Listing 4-8 shows the ClearableEditText class. Within the constructor it inflates the layout resource created earlier and gets references to each of the Views it contains. It also makes a call to hookupButton that will be used to hook up the clear text functionality when the button is pressed.

LISTING 4-8: Constructing a compound View Available for download on public class ClearableEditText extends LinearLayout { Wrox.com

EditText editText; Button clearButton;

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

// Inflate the view from the layout resource.

Prepared for ASHLEE KABAT, email: [email protected] Order number: 56760408 This PDF is for the purchaser's personal use in accordances^ es the Wrox Terms of Service and under US copyright as stated on this book's copyright page. If you did not purchase this copy, please visit www.wrox.com to purchase your own copy.

LISTING 4-8 (continued)

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. Listing 4-9 shows the ClearableEditText constructor overridden to create the same UI defined in the XML used in Listing 4-8.

Available for downloadon public ClearableEditText(Context context) { Wrox.com 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 View layout has been constructed you can hook up the event handlers for each child control to provide the functionality you need. In this next snippet the hookupButton method is filled in to clear the Edit Text when the Button is pressed.

private void hookupButton() {

clearButton.setOnClickListener(new Button.OnClickListener() { public void onClick(view v) { editText.setText("");

LISTING 4-9: Creating a compound View layout in code

Mobile Apps Made Easy

Mobile Apps Made Easy

Quick start guide to skyrocket your offline and online business success with mobile apps. If you know anything about mobile devices, you’ve probably heard that famous phrase coined by one of the mobile device’s most prolific creators proclaiming that there’s an app for pretty much everything.

Get My Free Training Guide


Post a comment