Creating a Simple Compound Component in Android

A compound component allows you to group multiple pre-built or custom widgets so that they can be used as a single component. Using compound components can help you modularize the UI elements in your Android application, which is especially helpful for those that need to be used multiple times throughout an app.

This tutorial will walk you through the process of creating a simple compound component: a horizontal NumberPicker.

We will start by creating the layout for your component, which can be done using XML or programmatically in Java. In this example, it is just a horizontal LinearLayout that contains an EditText between two buttons.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

   <Button
       android:id="@+id/btn_minus"
       android:layout_width="50dp"
       android:layout_height="wrap_content"
       android:text="-" />

   <EditText
       android:id="@+id/edit_text"
       android:layout_width="75dp"
       android:layout_height="wrap_content"
       android:inputType="number"
       android:gravity="center"
       android:focusable="false"
       android:text="0" />

   <Button
       android:id="@+id/btn_plus"
       android:layout_width="50dp"
       android:layout_height="wrap_content"
       android:text="+" />
</LinearLayout>
Then, we need to create the HorizontalNumberPicker class, which extends a LinearLayout and contains a constructor for the new class.

public class HorizontalNumberPicker extends LinearLayout {
    public HorizontalNumberPicker(Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater layoutInflater = (LayoutInflater)context
                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layoutInflater.inflate(R.layout.horizontal_number_picker, this);
    }
}

Since we are extending a layout, it is not necessary to override the onDraw() or onMeasure() methods, as this is already done for us.

You would then need to write all of the Java code to actually make this component function as a HorizontalNumberPicker, but that was left out for simplicity.

A couple of things you could do to make this component more useful as a standalone widget are to create your own XML attributes that can be used by your constructor, and implementing a custom listener that is called when the value is changed.

That’s all it takes to make a custom component! We can now use our HorizontalNumberPicker as a single component in our main.xml file

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

     <example.example.HorizontalNumberPicker
         android:id ="@+id/horizontal_number_picker"
         android:layout_width ="wrap_content"
         android:layout_height ="wrap_content" />
</FrameLayout>

About Jeffrey Starke

Jeffrey Starke was an undergraduate Computational Biology major who discovered an interest in user experience design while taking the mobile programming course. He joined the mobile lab in Spring 2012, specializing in optimizing the user experience. Jeffrey also helped film and edit informational and promotional videos for the lab. Shortly after graduating in Spring 2012, he was hired by iMobile3 as an Android developer.