In the previous article we continued the creation of a custom control and extended it to enable us to configure it via the XML layout rather than only programatically. In this article we’ll cover extending the control further so that we can properly style and theme it.
The final source from the previous article can be found here.
First let’s look at how we can control things through a style. First we need to create a new style in res/values/styles.xml:
We have set the style as bold|italic so that we can clearly see that these changes have overridden the previous behaviour.
To use this we can simply specify a style attribute in the XML layout in res/layout/main.xml:
We have removed both the attributes from the HighlightedTextView and the “sa” namespace declaration.
We can see that this works if we run it:
That was pretty easy, but what about if we want to control this from a theme? In the article on Themes we looked at how to apply a theme to an app, and this was dependent on using some Android defined names to assign values to specific elements. In this case we have our own attributes which do not match anything that Android has defined, so how can we tie our theme to our control attributes? Well, we can create our own identifier which we can tie to our control. To do this, we first need to declare a new styleable in res/values/attrs.xml:
We have added lines 13-15 which declare a new styleable named “MyTheme” containing a single attribute named “highlightedTextViewStyle”, which is a reference type meaning that it refers to another object.
We now need to change our HighlightedtextView object so that it binds to this attribute by changing one of the constructors:
public HighlightedTextView( Context context, AttributeSet attrs )
{
this( context, attrs, R.attr.highlightedTextViewStyle );
}
Previously the third argument to the this() call was simply set to 0.
We now need to create a new theme in res/values/themes.xml:
Here we are binding the highlightedTextViewStyle attribute that the control is now connected to to the style that we created at the start of this article.
We can now remove the style attribute from our XML layout in res/layout/main.xml:
Finally we need to specify the theme in the manifest:
The theme is applied on line 8.
Finally, let’s just tweak the regular expression in the res/values/styles.xml to clearly show that this is working:
The regex will now match the “words” or “works” instead of “Highlight” or “highlight”:
That concludes this series of articles. Hopefully you now have a much better understanding of how themes and styles are actually bound to individual controls through styleable attributes, and understanding how this process works should make it much easier to understand how the stock controls are bound to themes.
As a follow to this article, you may like to browse the Android source code for the stock Android widgets in the android.widgets package, and the associated resources. It is worth looking at the file in res/values/public.xml as this declared the attributes which are made publicly available and you can reference from your themes.
The final source of this project can be found here.
© 2011, Mark Allison. All rights reserved.
Copyright © 2011 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
