This chapter is from the book
This chapter is from the book
This chapter is from the book
Complex TextViews
TextView is an extremely powerful view in Android. Obviously, they’re able to display text, but they can also display several styles of text, different fonts or colors, and even inline images, all within a single TextView. You can have specific portions of text respond to click events and really associate any object you want with any portion of text. These ranges of text are generically referred to as “spans,” as in a span (range) of bold text or a span of subscript.
Existing Spans
Android has a large number of prebuilt spans you can take advantage of. Because you can assign any object as a span, there isn’t an actual span class. That’s great in that it gives you a huge amount of flexibility, but it also means you have to dig a little to figure out what is supported.
First, you should know about the two main types of spans defined by the interfaces CharacterStyle and ParagraphStyle. As you can probably guess, these interfaces refer to spans that affect one or more characters and spans that affect entire paragraphs, respectively. Most spans will implement one of these two interfaces (although many implement more than just these). See the following list of built-in spans to get an idea about what is already supported:
- AbsoluteSizeSpan—A span that allows you to specify an exact size in pixels or density independent pixels.
- AlignmentSpan.Standard—A span that attaches an alignment (from Layout.Alignment).
- BackgroundColorSpan—A span that specifies a background color (the color behind the text, such as for highlighting).
- ClickableSpan—A span that has an onClick method that is triggered. (This class is abstract, so you can extend it with a class that specifies the onClick behavior.)
- DrawableMarginSpan—A span that draws a Drawable plus the specified amount of spacing.
- DynamicDrawableSpan—A span that you can extend to provide a Drawable that may change (but the size must remain the same).
- EasyEditSpan—A span that just marks some text so that the TextView can easily delete it.
- ForegroundColorSpan—A span that changes the color of the text (basically just called setColor(int) on the TextPaint object).
- IconMarginSpan—A span that draws a Bitmap plus the specified amount of spacing.
- ImageSpan—A span that draws an image specified as a Bitmap, Drawable, URI, or resource ID.
- LeadingMarginSpan.Standard—A span that adjusts the margin.
- LocaleSpan—A span that changes the locale of text (available in API level 17 and above).
- MaskFilterSpan—A span that sets the MaskFilter of the TextPaint (such as for blurring or embossing).
- MetricAffectingSpan—A span that affects the height and/or width of characters (this is an abstract class).
- QuoteSpan—A span that puts a vertical line to the left of the selected text to indicate it is a quote; by default the line is blue.
- RasterizerSpan—A span that sets the Rasterizer of the TextPaint (generally not useful to you).
- RelativeSizeSpan—A span that changes the text size relative to the supplied float (for instance, setting a 0.5 float will cause the text to render at half size).
- ReplacementSpan—A span that can be extended when something custom is drawn in place of the spanned text (e.g., ImageSpan extends this).
- ScaleXSpan—A span that provides a multiplier to use when calling the TextPaint’s setTextScaleX(float) method. (In other words, setting this to 0.5 will cause the text to be scaled to half size along the X-axis, thus appearing squished.)
- StrikethroughSpan—A span that simply passes true to the TextPaint’s setStrikeThruText(boolean) method, causing the text to have a line through it (useful for showing deleted text, such as in a draft of a document).
- StyleSpan—A span that adds bold and/or italic to the text.
- SubscriptSpan—A span that makes the text subscript (below the baseline).
- SuggestionSpan—A span that holds possible replacement suggestions, such as for a incorrectly spelled word (available in API level 14 and above).
- SuperscriptSpan—A span that makes the text superscript (above the baseline).
- TabStopSpan.Standard—A span that allows you to specify an offset from the leading margin of a line.
- TextAppearanceSpan—A span that allows you to pass in a TextAppearance for styling.
- TypefaceSpan—A span that uses a specific typeface family (monospace, serif, or sans-serif only).
- UnderlineSpan—A span that underlines the text.
- URLSpan—A ClickableSpan that attempts to view the specified URL when clicked.
Using Spans for Complex Text
One of the simplest ways to use spans is with the HTML class. If you have some HTML in a string, you can simply call HTML.fromHtml(String) to get an object that implements the spanned interface that will have the applicable spans applied. You can even supply an ImageGetter and a TagHandler, if you’d like. The styles included in the HTML will be converted to spans so, for example, “b” (bold) tags are converted to StyleSpans and “u” (underline) tags are converted to UnderlineSpans. See Listing 10.11 for a brief example of how to set the text of a TextView from an HTML string and enable navigating through and clicking the links.
Listing 10.11 Using HTML in a TextView
textView.setText(Html.fromHtml(htmlString));
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setLinksClickable(true);Another easy method for implementing spans is to use the Linkify class. The Linkify class allows you to easily create links within text for web pages, phone numbers, email addresses, physical addresses, and so on. You can even use it for custom regular expressions, if you’re so inclined.
Finally, you can also manually set spans on anything that implements the Spannable interface. If you have an existing String or CharSequence that you’d like to make Spannable, use the SpannableString class. If you are building up some text, you can use the SpannableStringBuilder, which works like a StringBuilder but can attach spans. To the untrained eye, the app in Figure 10.13 is using two TextViews and an ImageView, but it actually has just a single TextView. See Listing 10.12 to understand how you can do this with one TextView and a few spans.
)
Figure 10.13 An app that seemingly uses more views than it really does
Listing 10.12 Using Spans with a SpannableStringBuilder
final SpannableStringBuilder ssb = new SpannableStringBuilder();
final int flag = Spannable.SPAN_EXCLUSIVE_EXCLUSIVE;
int start;
int end;
// Regular text
ssb.append("This text is normal, but ");
// Bold text
start = ssb.length();
ssb.append("this text is bold");
end = ssb.length();
ssb.setSpan(new StyleSpan(Typeface.BOLD), start, end, flag);
// Inline image
ssb.append('\n');
start = end + 1;
ssb.append('\uFFFC'); // Unicode replacement character
end = ssb.length();
ssb.setSpan(new ImageSpan(this, R.mipmap.ic_launcher), start, end, flag);
// Stretched text
start = end;
ssb.append("This text is wide");
end = ssb.length();
ssb.setSpan(new ScaleXSpan(2f), start, end, flag);
// Assign to TextView
final TextView tv = (TextView) findViewById(R.id.textView);
tv.setText(ssb);