The
SpannableString
in android is an excellent way to style strings in a
TextView
.
Put simply, it allows a
TextView to provide different styles to different areas of text.
In the following example, we create in
Activity to display a single
TextView.
The
TextView will use a
SpannableString as its content, which will illustrate some of the available styles.
Here' what we're gonna do with the text :
The finished Activity will look like this :
So lets's dig in :). For simplicity, I'v limited myself to the onCreate() method of the Activity.
Here' what we're gonna do with the text :
- Make it larger
- Bold
- Underline
- Italicize
- Strike-through
- Colored
- Highlighted
- Show as superscript
- Show as subscript
- Show as a link
- Make it clickable.
The finished Activity will look like this :
So lets's dig in :). For simplicity, I'v limited myself to the onCreate() method of the Activity.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
SpannableString styledString
= new SpannableString("Large\n\n" // index 0 - 5
+ "Bold\n\n" // index 7 - 11
+ "Underlined\n\n" // index 13 - 23
+ "Italic\n\n" // index 25 - 31
+ "Strikethrough\n\n" // index 33 - 46
+ "Colored\n\n" // index 48 - 55
+ "Highlighted\n\n" // index 57 - 68
+ "K Superscript\n\n" // "Superscript" index 72 - 83
+ "K Subscript\n\n" // "Subscript" index 87 - 96
+ "Url\n\n" // index 98 - 101
+ "Clickable\n\n"); // index 103 - 112
// make the text twice as large
styledString.setSpan(new RelativeSizeSpan(2f), 0, 5, 0);
// make text bold
styledString.setSpan(new StyleSpan(Typeface.BOLD), 7, 11, 0);
// underline text
styledString.setSpan(new UnderlineSpan(), 13, 23, 0);
// make text italic
styledString.setSpan(new StyleSpan(Typeface.ITALIC), 25, 31, 0);
styledString.setSpan(new StrikethroughSpan(), 33, 46, 0);
// change text color
styledString.setSpan(new ForegroundColorSpan(Color.GREEN), 48, 55, 0);
// highlight text
styledString.setSpan(new BackgroundColorSpan(Color.CYAN), 57, 68, 0);
// superscript
styledString.setSpan(new SuperscriptSpan(), 72, 83, 0);
// make the superscript text smaller
styledString.setSpan(new RelativeSizeSpan(0.5f), 72, 83, 0);
// subscript
styledString.setSpan(new SubscriptSpan(), 87, 96, 0);
// make the subscript text smaller
styledString.setSpan(new RelativeSizeSpan(0.5f), 87, 96, 0);
// url
styledString.setSpan(new URLSpan("http://www.google.com"), 98, 101, 0);
// clickable text
ClickableSpan clickableSpan = new ClickableSpan() {
@Override
public void onClick(View widget) {
// We display a Toast. You could do anything you want here.
Toast.makeText(SpanExample.this, "Clicked", Toast.LENGTH_SHORT).show();
}
};
styledString.setSpan(clickableSpan, 103, 112, 0);
// Give the styled string to a TextView
TextView textView = new TextView(this);
// this step is mandated for the url and clickable styles.
textView.setMovementMethod(LinkMovementMethod.getInstance());
// make it neat
textView.setGravity(Gravity.CENTER);
textView.setBackgroundColor(Color.WHITE);
textView.setText(styledString);
setContentView(textView);
}
A little explanation
The comments explain most of the stuff but here's a bit more.
The parameters for the setSpan() method are
The parameters for the setSpan() method are
- what : The type of Span.
- start : The inclusive start index for the Span.
- end : The exclusive end index for the Span.
- flag : Additional configuration. Refer to the constants here.
Notes :
- Multiple spans can be applied to the same area in a String. This has been shown above in the superscript span, where the text was both reduced in size and made superscript.
- The URLSpan and ClickableSpan both require the movementMethod of the TextView to be set as LinkMovementMethod.
- SpannableStrings are immutable. If this is a concern, use a SpannableStringBuilder.
- If you're using a string resource as the content of the TextView, some of the above styles can be declared in the resource itself. See this to check how.
- You could also use the Html.fromHtml method to create Spanned Strings using html tags. For an unofficial list of supported tags see this.