Android Custom XML Attributes

Android Custom XML Attributes

12/09/12 by Robert Hewitt

When writing code the goal is always to write little and make what you do write in reusable components. Android has always had the ability to parse the XML attributes defined when constructing a view but little used is the ability for custom attributes to be applied.
* See step 4 for adding custom attributes to library projects

Example situation

Let’s say we want to extend the functionality of an EditText to have a range applied so there are bounds to the input. This could be used for limited text entry when entering information into a database.

To add one of these such views through XML would look something like this...

<?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"
    >

    <com.kotikan.blogposts.views.RangeEditText
        android:id="@+id/range_edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Hello World, MyActivity"
        />

</LinearLayout>

Then in code we would have to find the view and call through to other set up methods to complete the state loading of this RangeEditText as follows...

final RangeEditText rangeEditText = (RangeEditText) findViewById(R.id.range_edit);
rangeEditText.setMaxCharsAllowed(15);
rangeEditText.setMinCharsAllowed(7);

This is wasteful due to the constructor of this view already being called through the XML inflation phase and now having to load yet more state into this view through additional android lifecycle hooks.
Here is a step by step guide to achieving the same result through XML definition.

Step 1 - attrs.xml

Firstly we need to declare the styleable attributes so we can use them in XML markup. Create a file called ‘attrs.xml’ inside [projectRoot]/res/values/ and add the following -

<resources>
    <declare-styleable name="RangeEditText">
        <attr name="charInputMinimum" format="integer"/>
        <attr name="charInputMaximum" format="integer"/>
    </declare-styleable>
</resources>

Step 2 - Updating RangeEditText

We now need to update our class to parse these attributes. There are two constructors for a View that take AttributeSet therefore it’s often convenient to telescope the constructors for easier code maintenance.

e.g.

public class RangeEditText extends EditText {

    private int charsAllowedMinimum;
    private int charsAllowedMaximum;

    public RangeEditText(Context context) { this(context, null); }
    public RangeEditText(Context context, AttributeSet attrs) { this(context, attrs, 0); }
    public RangeEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        loadStateFromAttrs(attrs);
        /* other code */
    }
    private void loadStateFromAttrs(AttributeSet attributeSet) {
        if (attributeSet == null) {
            return; // quick exit
        }

        TypedArray a = null;
        try {
            a = getContext().obtainStyledAttributes(attributeSet, R.styleable.RangeEditText);
            charsAllowedMinimum = a.getInt(R.styleable.RangeEditText_charInputMinimum, DEFAULT_MINIMUM);
            charsAllowedMaximum = a.getInt(R.styleable.RangeEditText_charInputMaximum, DEFAULT_MAXIMUM);
        } finally {
            if (a != null) {
                a.recycle(); // ensure this is always called
            }
        }
    }
}

Step 3 - Use in XML

Now we have set up our attrs.xml file and our class to handle parsing of the attributes we can now use the attributes in an XML file in our project.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.kotikan.blogposts"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <com.kotikan.blogposts.views.RangeEditText
        android:id="@+id/range_edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:charInputMinimum="8"
        app:charInputMaximum="25"
        />

</LinearLayout>

Note use of xml namespace app "http://schemas.android.com/apk/res/com.kotikan.blogposts"

Step 4:

Up until lately (see r17 release notes) creating XML attributes for a library project’s custom view was not possible. What does this mean for the developer? Now our library code can become even more powerful by allowing us to set state of the custom view in our XML files which allows us to take advantage of the resource loading ability of Android. This means that we can alter the way our view looks dynamically just through creating another layout file and letting the android system take care of loading our views.

To achieve this we need to modify the XML file that defines our ‘app’ namespace. A simple one liner in the header of the XML file will take care of this for us:

   xmlns:app="http://schemas.android.com/apk/res-auto"

this URI is replaced with the specific app URI upon building the project thereby allowing you to use this in any project.

Conclusion

We have now successfully passed through state from our XML file to the class constructor. This has been applied at the project level (and provided you are using r17 or later) also for a library component.

I hope you, like us, find many uses for this trick.

Notes: 
An implementation of this example is freely available on github: git clone git@github.com:kotikan/blog-android-customAttributes.git

The code uses Maven3 to build - notes for how to use maven can be found at apache.org. Scroll to the section named “Installation Instructions” for help on how to set up your system.