You can find the full source code for
TextDrawableand the sample project on GitHub.
The Drawable framework in Android is a neat and really flexible way to create portions of your UI. Many times have I been able to simplify the view hierarchy or required resources just by getting creating with what a Drawable can do. Recently, I had a need to place text into a Drawable so it could be inserted in places where the framework only allows Drawables to go. So I created
TextDrawable and though it share it.
If you would like to take a look at the
TextDrawable source directly, head over to the GitHub link above. This post deals mostly with the example application that wraps the implementation.
TextDrawable is exactly that, a Drawable that displays a
CharSequence. It supports most all of the functionality you would find on
Textview for setting and formatting text display. It supports multi-line strings (line breaks, etc.) and is configured to have intrinsic bounds equal to the size required to draw the text contents as formatted. This means that in most cases, you don’t have to explicitly call
setBounds() on the object, it knows how big it wants to be…similar to working with Bitmaps.
With this class, text can now be part of the Drawable world, meaning it can not only be set alone in places where you would normally put an image, it can also be placed together with other Drawables in containers like
StateListDrawable or animated with the likes of
ClipDrawable. In many cases, we can use this to do a job that would otherwise require multiple views or compound controls just to achieve a given visual effect; thus it can reduce overhead in your view hierarchy.
One of the major drawbacks of creating your own Drawable implementations is they cannot be inflated using XML (the Android team claims this is a security concern since this code is used by the core platform, so I wouldn’t expect it to change anytime soon). This can make them more difficult to work with if you want to include a custom implementation inside a larger composite container (such as a state list or layer list). Note that it is still possible, it just means you must do all your Drawable construction in Java.
A simple example of using
TextDrawable looks something like this:
TextDrawable d = new TextDrawable(this);
d.setText("SAMPLE TEXT\nLINE TWO");
This simply display the two-line string supplied, center-aligned, using the default text appearance settings from the application theme.
TextDrawable does have one additional feature, in that you can also pass a Path object to it if you want the text to be drawn in a particular custom way (e.g. in a circle or along a curve). In this case, the text measurement code cannot properly determine the size required, so
TextDrawable will report no intrinsic size and you will need to call
setBounds() with a size that appropriately matches the Path you have applied.
TextDrawable d = new TextDrawable(this);
d.setText("TEXT DRAWN IN A CIRCLE");
Path p = new Path();
int origin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, getResources().getDisplayMetrics());
int radius = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, getResources().getDisplayMetrics());
int bound = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 80, getResources().getDisplayMetrics());
p.addCircle(origin, origin, radius, Path.Direction.CW);
//Must call setBounds() since we are using a Path
d.setBounds(0, 0, bound, bound);
In this example we apply a circular path to the
TextDrawable on which to draw the text content. Because we are using a custom path, and
TextDrawable cannot measure its proper size, our application must also call
setBounds() to the Drawable before handing it over to the
Another very useful case for this is to place a small piece of static text in the top, bottom, left, right drawable locations on a
TextView widget. The following example inserts a short, non-editable, text prefix before whatever the user types into an
d = new TextDrawable(this);
mEditText.setCompoundDrawablesWithIntrinsicBounds(d, null, null, null);
If you want to use the same text in multiple locations, you can even set the same instance in more than one place. Notice how we used the version of this method that expects intrinsic bounds. If we had used a Path, we would need to explicitly call
setBounds() and use
Buttonis also a
Textview, you can use this technique there as well.
The following example wraps
TextDrawable in a
ClipDrawable for the purposes of animating the revealing of the supplied text in a more granular fashion rather than just going letter-by-letter (i.e. typewriter style):
d = new TextDrawable(this);
d.setText("SHOW ME TEXT");
ClipDrawable clip = new ClipDrawable(d, Gravity.LEFT, ClipDrawable.HORIZONTAL);
You can then animate this by calling
setImageLevel() repeatedly on the enclosing container.
These are only some of the examples of what you might be able to simplify in your application UI by using text as a Drawable.
In developing the examples for this, I came across a problem on ICS and Jelly Bean devices (and probably Honeycomb) having to do with hardware acceleration. We’re all familiar by now with the fact that hardware acceleration is a great addition to the platform starting in Android 3.0 but that not all drawing primitives and features are quite yet properly supported there. In many cases View, Activities, or entire applications need to disable hardware acceleration to keep compatibility with their graphics code…this is one of those such cases. It seems that
drawText() or one of its variants is not yet fully supported in hardware.
You may notice if you look at the example code posted with the
TextDrawable implementation that some of the
ImageView instances have a separate scaling mode applied to illustrate how
TextDrawable responds to being matrix scaled. The framework matrix scales images by transforming the Canvas on which they are drawn, and on older devices or with hardware acceleration disabled, this works great. However, enabling hardware acceleration will cause the text in the scaled cases to get terribly pixelated. I imagine in the future this will be corrected, but it’s behavior at least on these versions of the platform will forever be this way.
As is common in these cases, the solution is to add
hardwareAcceleration="false" to your manifest or use
setLayerType(View.LAYER_TYPE_SOFTWARE, null) on the View where you may be doing these transformations.
Tip: Resizing Issues
One thing to be aware of when using Drawables in a dynamic manner (i.e. changing their contents after they are set on a View) is that most widgets in the framework do not allow for a drawable to notify the host that it has been resized. Most widgets like
ImageView act as a callback for the Drawable so it can request, through invalidation, that it be redrawn. however, in most cases this does not trigger the host View to re-check the Drawable bounds. The initial bounds it calculated are those you are stuck with. In many cases where we display Bitmaps, this is not a concern, however if you are expecting to dynamically change the text of a
TextDrawable after it is attached, you will notice that text will simply be redrawn inside of the initial bounding box.
There are a few hacks to get this to work if that is your plan. For example,
ImageView does remeasure its Drawable content whenever
setSelected() is called, so it is possible to force
ImageView to resize the drawable with each change by calling
setSelected(false) each time as well (assuming this doesn’t affect other code you may have in place). The best solution, however, is to use the container Drawables in the framework whenever possible to create the dynamic effects you need.
So there you have it! Now the next time you think to yourself “if I could just put this text into a Drawable…”; now you can!