Home > Articles > Mobile Application Development & Programming

  • Print
  • + Share This
This chapter is from the book

Complex TextViews

TextViews in Android are extremely powerful. 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: 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. 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:

  • AbsoluteSizeSpanA span that allows you to specify an exact size in pixels or density independent pixels.
  • AlignmentSpan.StandardA span that attaches an alignment (from Layout.Alignment).
  • BackgroundColorSpanA span that specifies a background color (the color behind the text, such as for highlighting).
  • ClickableSpanA 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.)
  • DrawableMarginSpanA span that draws a Drawable plus the specified amount of spacing.
  • DynamicDrawableSpanA span that you can extend to provide a Drawable that may change (but the size must remain the same).
  • EasyEditSpanA span that just marks some text so that the TextView can easily delete it.
  • ForegroundColorSpanA span that changes the color of the text (basically just called setColor(int) on the TextPaint object).
  • IconMarginSpanA span that draws a Bitmap plus the specified amount of spacing.
  • ImageSpanA span that draws an image specified as a Bitmap, Drawable, URI, or resource ID.
  • LeadingMarginSpan.StandardA span that adjusts the margin.
  • LocaleSpanA span that changes the locale of text (available in API level 17 and above).
  • MaskFilterSpanA span that sets the MaskFilter of the TextPaint (such as for blurring or embossing).
  • MetricAffectingSpanA span that affects the height and/or width of characters (this is an abstract class).
  • QuoteSpanA 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.
  • RasterizerSpanA span that sets the Rasterizer of the TextPaint (generally not useful to you).
  • RelativeSizeSpanA 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).
  • ReplacementSpanA span that can be extended when something custom is drawn in place of the spanned text (for example, ImageSpan extends this).
  • ScaleXSpanA 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.)
  • StrikethroughSpanA 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).
  • StyleSpanA span that adds bold and/or italic to the text.
  • SubscriptSpanA span that makes the text subscript (below the baseline).
  • SuggestionSpanA span that holds possible replacement suggestions, such as for a incorrectly spelled word (available in API level 14 and above).
  • SuperscriptSpanA span that makes the text superscript (above the baseline).
  • TabStopSpan.StandardA span that allows you to specify an offset from the leading margin of a line.
  • TextAppearanceSpanA span that allows you to pass in a TextAppearance for styling.
  • TypefaceSpanA span that uses a specific typeface family (monospace, serif, or sans-serif only).
  • UnderlineSpanA span that underlines the text.
  • URLSpanA 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.3 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.3

Figure 10.3. An app that seemingly uses more views than it really does

Listing 10.12. Using Spans with a SpannableStringBuilder

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        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++;
        ssb.append('\uFFFC'); // Unicode replacement character
        end = ssb.length();
        ssb.setSpan(new ImageSpan(this, R.drawable.ic_launcher), start, end, flag);

        // Stretched text
        ssb.append('\n');
        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 = new TextView(this);
        tv.setText(ssb);
        setContentView(tv);
    }
}
  • + Share This
  • 🔖 Save To Your Account