Android - custom UI with custom attributes

Waypoint picture Waypoint · Sep 30, 2011 · Viewed 66.8k times · Source

I know it is possible to create custom UI element (by way of View or specific UI element extension). But is it possible to define new properties or attributes to newly created UI elements (I mean not inherited, but brand new to define some specific behavior I am not able to handle with default propertis or attributes)

e.g. element my custom element:

<com.tryout.myCustomElement
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Element..."
   android:myCustomValue=<someValue>
/>

So is it possible to define MyCustomValue?

Thx

Answer

user658042 picture user658042 · Sep 30, 2011

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.