android - Custom view made of multiple views

Question

I have a set of views I want to always use together. An example of this may be something like:

<LinearLayout>
    <TextView />
    <EditView />
</LinearLayout>

The text view is a prompt, and the edit view is the answer. I would like to give this combination a name, and be able to use that name to pop it into xml. I'd love for it to be a custom view so I can put it nicely in a class and create various utility functions for it. Is there any way I can do that? I know I could subclass LinearLayout and create the children dynamically in the java code, but that loses me the ability to easily make changes via xml. Is there a better route?

And yes, I also have places I want to do this which are more involved than just prompts.

Answer 1

This example is for a horizontal number picker widget, but it's the same concept.

First create the XML layout for your custom component

<?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 create the java class

public class HorizontalNumberPicker extends LinearLayout {
    public HorizontalNumberPicker(Context context, AttributeSet attrs) {
         super(context, attrs);
         LayoutInflater inflater = LayoutInflater.from(context);
         inflater.inflate(R.layout.horizontal_number_picker, this);
     }
 }

Add whatever logic you need to that java class, then you can just include the custom component in your XML layout like so:

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

Check out this link for more information: http://developer.android.com/guide/topics/ui/custom-components.html#compound