Android Styleable Custom View

Slides to go along with a presentation on making custom Android views styleable through xml attributes.

Transcript

1. Android Styleable Custom View https://github.com/alphonzo79/AndroidStyleableViewExample
2. The Challenge • The design team has established a strong design and theme for the app. • Even though design elements keep the same or similar form, there are variations to communicate state or to differentiate sections of the app.
3. Step One: Custom View • Extend a base View class – Most often one of the layouts: LinearLayout, FrameLayout, RelativeLayout • Build your xml layout • Remember to change the root to merge when you have it all set • Create initView method (or similar) and call from all constructors to inflate the layout • Expose needed methods in the Javas just like any other
4. Step Two: Make it Styleable • Declare the View styleable in attrs.xml • Define each attribute for the view • Define the format(s) for each attribute • Optionally, define flags for specific, limited possible values
5. Step Three: Consume the Attributes • Inside initView, after inflating the layout, retrieve the attributes • TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ComplexEditText); • Attributes may not be present • Some attributes may be represented in different formats • Don't forget to recycle the TypedArray
6. Step Four: Wire it all together • Declare a namespace pointing to res-auto • xmlns:app="http://schemas.android.com/apk/res­auto" • Apply your attributes as you would any others, but prefixed with your own namespace
7. Tips • Look through the Android source code, especially for the view that you're extending or views that you're incorporating • http://trickyandroid.com/protip-inflating-layout-for-your- custom-view/