This document discusses rich text editing capabilities in Android. It provides an overview of rich text rendering in TextView, the use of CharacterStyle and Spanned interfaces to apply and retrieve formatting spans, and approaches to importing and exporting rich text to formats like HTML, Markdown, and resources. It also covers the open source RichEditText widget and opportunities for improving rich text editing support.

1. Rich Text
Editing... And
Beyond
Copyright © 2012CommonsWare, LLC

2. Whadaya Mean, Rich?
● Things Like Bold, Italics, Underline, Etc.
● Other Terms
– Styled Text
– Formatted Text
– WYSIWYG
Copyright © 2012CommonsWare, LLC

3. Is Android Rich?
● Native Rich Text Rendering in TextView
– Available to all subclasses of TextView (e.g.,
Button)
– Reasonable (but not immense) range of available
styles to apply
● Differing fonts, colors
● Vertical & horizontal alignments
● Bullets
● Etc.
Copyright © 2012CommonsWare, LLC

4. Where Did All the Strings Go?
● CharSequence
– In traditional Java, an inheritance artifact
● Mostly the superclass of StringBuilder
– In Android, used as basis for rich text
● Hence, lots of CharSequence parameters and
return values, in places where Android supports rich
text
Copyright © 2012CommonsWare, LLC

5. Spanning the Globe
● Spanned
– Interface for CharSequences with inline
formatting
● Spannable
– Sub-interface where the spans can be modified
● Editable
– Sub-sub-interface where the text can be
modified
Copyright © 2012CommonsWare, LLC

6. Getting More Concrete
● SpannedString
– String with markup
● SpannableString
– String with mutable markup
● SpannableStringBuilder
– String with mutable text and markup
Copyright © 2012CommonsWare, LLC

7. We Are Stylin'
● CharacterStyle
– Base class for all styles that can be applied to a
portion of a Spanned
– 21 total subclasses, each applying some effect
● BackgroundColorSpan
● StyleSpan
● TypefaceSpan
● StrikethroughSpan
Copyright © 2012CommonsWare, LLC

8. Our Resources Are Low
● String Resources
– Can have inline markup (<b>, <i>, <u>)
– Retrieving the SpannedString
● getText() (as opposed to getString())
● Applying the resource directly to a widget in a layout
via @string/...
Copyright © 2012CommonsWare, LLC

9. Oh, Those Angle Brackets
● HTML
– Use Html.fromHtml() to convert into
SpannedString
● Modest, undocumented set of tags supported
● Optional, largely undocumented TagHandler for
trying to add support for other tags
– Put the resulting SpannedString in a
TextView (or subclass)
Copyright © 2012CommonsWare, LLC

10. Tag! You're It?
● <a href="..."> ● <h4>
● <b> ● <h5>
● <big> ● <h6>
● <blockquote> ● <i>
● <br> ● <img src="...">
● <cite> ● <p>
● <dfn> ● <small>
● <div align="..."> ● <strike>
● <em> ● <strong>
● <font size="..." color="..." face="..."> ● <sub>
● <h1> ● <sup>
● <h2> ● <tt>
● <h3> Copyright © 2012CommonsWare, LLC ● <u>

11. Mark It Down
● Anything You Can Convert to HTML
● Example: Markdown
– Popular wikitext format
– Used by StackOverflow, GitHub, etc.
– Various parsers available
– Example: AndDown
● Wrapper around sundown C parser
Copyright © 2012CommonsWare, LLC

12. Format This, Buddy
● Step #1: Get a SpannableString (or
subclass)
● Step #2: Manipulate the Formatting
– setSpan() applies formatting to a particular
region
– removeSpan() removes a particular span
– getSpans() retrieves applied spans for a given
region
Copyright © 2012CommonsWare, LLC

13. The End of Style
● SPAN_EXCLUSIVE_EXCLUSIVE
– Anything added at either end is considered
outside the span
● SPAN_INCLUSIVE_INCLUSIVE
– Anything added at either end is considered
inside the span
● SPAN_EXCLUSIVE_INCLUSIVE
● SPAN_INCLUSIVE_EXCLUSIVE
Copyright © 2012CommonsWare, LLC

14. CharSequence: Rich Yet Not
● Most Utility Methods On String, Not
CharSequence
– Example: indexOf()
● TextUtils
– Offers a subset of those utility methods as static
methods that can be applied to a
CharSequence
Copyright © 2012CommonsWare, LLC

15. Hello? Didn't You Say “Editing”?
● EditText
– Supports Editable
● Reason why you keep calling toString() to get the
plain text back
– Users Edit Prose in Existing Spans
● You supply something with spans, and user types in
the middle of one, gets formatted
– No UI for Users to Set Own Spans
Copyright © 2012CommonsWare, LLC

16. RichEditText
● Open Source Component
● Easy: Automatic FORMAT Action Mode
– One method to enable
– Works on Android 2.1+ (ActionBarSherlock!)
– Works great on tablets (and not so hot on phones...)
● Harder: Roll Your Own UI
– E.g., toolbar
Copyright © 2012CommonsWare, LLC

17. RichEditText: Innards
● Action Mode Items Set or Toggle “Effects”
– Effect = Wrapper Around CharacterStyle
● Awareness of current selection
● Manages idiosyncrasies of different style classes
– Toggle Logic
● See what's in the selection now of this particular
effect
● Invert current setting
Copyright © 2012CommonsWare, LLC

18. RichEditText: The Future!
● Better Support for Phones
– ...somehow...
● Full Range of CharacterStyle Support
– Colors (foreground/background)
– Line alignment
– Bullets
– Links
● Ragnarök Copyright © 2012CommonsWare, LLC

19. A Little Bit Persistent
● SpannableString Not Serializable
● Best Native Bet: Convert into HTML
– Need to test that the formatting you apply will
survive the round-trip conversion
● Alternative: DIY
– More complete HTML conversion
– Convert into something else (byte array?
Markdown?)
Copyright © 2012CommonsWare, LLC

20. What Would Be Handy...
● More In, More Out
– Better HTML Conversion
– More wikitext support
● Other flavors
● Bi-directional
– Word processing formats (ODT, DOC/DOCX)
– Legacy formats
● RTF
Copyright © 2012CommonsWare, LLC

21. What Would Be Handy...
● More CharacterStyles?
– Theoretically an extensible system, based on
interfaces
● More Reusable Editing Widgets
– EditStyledText?
Copyright © 2012CommonsWare, LLC