Android – custom UI with custom attributes

by

Yes. Short guide:

1. Create an attribute XML

Create a new XML file inside /res/values/attrs.xml, with the attribute and it’s type

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <declare-styleable name="MyCustomElement">
        <attr name="distanceExample" format="dimension"/>
    </declare-styleable>
</resources>

Basically you have to set up one <declare-styleable /> for your view that contains all your custom attributes (here just one). I never found a full list of possible types, so you need to look at the source for one I guess. Types that I know are reference (to another resource), color, boolean, dimension, float, integer and string. They are pretty self-explanatory

2. Use the attributes in your layout

That works the same way you did above, with one exception. Your custom attribute needs it’s own XML namespace.

<com.example.yourpackage.MyCustomElement
   xmlns:customNS="http://schemas.android.com/apk/res/com.example.yourpackage"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Element..."
   customNS:distanceExample="12dp"
   />

Pretty straight forward.

3. Make use of the values you get passed

Modify the constructor of your custom view to parse the values.

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

    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyCustomElement, 0, 0);
    try {
        distanceExample = ta.getDimension(R.styleable.MyCustomElement_distanceExample, 100.0f);
    } finally {
        ta.recycle();
    }
    // ...
}

distanceExample is a private member variable in this example. TypedArray got lot’s of other things to parse other types of values.

And that’s it. Use the parsed value in your View to modify it, e.g. use it in onDraw() to change the look accordingly.

Leave a Comment

tech