Rich Text Editing and Beyond

Copyright © 2012CommonsWare, LLC

Rich Text Editing... And

Beyond


Whadaya Mean, Rich?

● Things Like Bold, Italics, Underline, Etc.● Other Terms

– Styled Text– Formatted Text– WYSIWYG


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.


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


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


Getting More Concrete

● SpannedString– String with markup

● SpannableString– String with mutable markup

● SpannableStringBuilder– String with mutable text and markup


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


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/...


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)


Tag! You're It?● <a href="...">

● <b>

● <big>

● <blockquote>

● <br>

● <cite>

● <dfn>

● <div align="...">

● <em>

● <font size="..." color="..." face="...">

● <h1>

● <h2>

● <h3>

● <h4>

● <h5>

● <h6>

● <i>

● <img src="...">

● <p>

● <small>

● <strike>

● <strong>

● <sub>

● <sup>

● <tt>

● <u>


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


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


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


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


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


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


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


RichEditText: The Future!

● Better Support for Phones– ...somehow...

● Full Range of CharacterStyle Support– Colors (foreground/background)– Line alignment– Bullets– Links

● Ragnarök


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?)


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


What Would Be Handy...

● More CharacterStyles?– Theoretically an extensible system, based on

interfaces● More Reusable Editing Widgets

– EditStyledText?

Rich Text Editing and Beyond

Technology

rich text copyright

span span

subclass copyright

acharsequence copyright

toolbar copyright

inclusive span

android rich

mutable text