Android Html.toHtml(editText.getText()) returns too many html tags

Question

I am using SpannableString to style text in an EditText using below

  str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), selectionStart, selectionEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
str.setSpan(new StyleSpan(android.graphics.Typeface.ITALIC), selectionStart, selectionEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    str.setSpan(new UnderlineSpan(), selectionStart, selectionEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Which renders the styled text properly as below hi **hello how are** yiu

hi - normal

hello - bold

how are - bold + italic

yiu - bold + italic + underline

But when I do Html.toHtml(editText.getText()) it returns

 <p><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">h</font></font></font></font></font></font></font></font></font></font></font></font></font>
</font></font></font></font></font>
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">i</font></font></font></font></font></font></font></font></font></font></font></font>
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
 </font></font></font></font></font></font>
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><b><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">h</font></font></font></font></font></font></b></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><font color ="#000000">
<font size ="3"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><b><font color ="#000000">
<font size ="3"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">o</font></font></font></font></font></font></b></font></font></font></font></font></font></font></font></font></font></font></font><font color ="#000000"><font size ="3"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><b><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><font color ="#000000"><font size ="3">w</font></font></font></font></font></font></b></font></font></font></font></font></font><b><font color ="#000000"><font size ="3"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"> </font></font></font></font></font></font></b><font color ="#000000"><font size ="3"><font size ="3">
<font color ="#000000"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><font size ="3">
<font color ="#000000"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><font size ="3">
<font color ="#000000"><font color ="#000000">
<font size ="3"><b><font color ="#000000">
<font size ="3"><i><font size ="3">
<font color ="#000000"><font color ="#000000">
<font size ="3">a</font></font></font></font></i></font></font></b></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><font color ="#000000"><font size ="3">
<font size ="3"><font color ="#000000">
<font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3">
<font size ="3"><font color ="#000000">
<font color ="#000000"><font size ="3"><b><font color ="#000000"><font size ="3"><i><font size ="3"><font color ="#000000">
<font color ="#000000"><font size ="3">r</font></font></font></font></i></font></font></b></font></font></font></font></font></font></font></font></font></font></font></font><font color ="#000000"><font size ="3">
<font size ="3">
<font color ="#000000"><font color ="#000000">
<font size ="3"><b><font color ="#000000">
<font size ="3"><i><font size ="3">
<font color ="#000000"><font color ="#000000">
<font size ="3">e</font></font></font></font></i></font></font></b></font></font></font></font></font></font><b><font color ="#000000">
<font size ="3"><i><font size ="3"><font color ="#000000">
<font color ="#000000"><font size ="3"> </font></font></font></font></i></font></font></b><font color ="#000000"><font size ="3"><font size ="3">
<font color ="#000000"><font color ="#000000"><font size ="3">
<font color ="#000000"><font size ="3"><font size ="3">
<font color ="#000000"><font color ="#000000">
<font size ="3"><b><font color ="#000000">
<font size ="3"><i><font size ="3">
<font color ="#000000"><u><font color ="#000000"><font size ="3">y</font></font></u></font></font></i></font></font></b></font></font></font></font></font></font></font></font></font></font></font></font><font color ="#000000">
<font size ="3"><font size ="3"><font color ="#000000">
<font color ="#000000"><font size ="3"><b><font color ="#000000"><font size ="3"><i><font size ="3"><font color ="#000000"><u><font color ="#000000"><font size ="3">o</font></font></u></font></font></i></font></font></b></font></font></font></font></font></font><b><font color ="#000000"><font size ="3"><i><font size ="3"><font color ="#000000"><u><font color ="#000000"><font size ="3">u</font></font></u></font></font></i></font></font></b></p>

Is this expected or am I missing something ? Suggest Please

Answer 1

Hmm It looks like the problem is with

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE

If you read the documentation it looks like any NEW text inserted into your string afterwards will not receive the formatting you specified. In order to do this in html, tags must be added to each individual character. So what you have appears to be what is expected

If you want there to be less tags try using

Spannable.SPAN_INCLUSIVE_INCLUSIVE

The difference will be that any text inserted into your string afterwards will have the same formatting as the surrounding text.

Answer 2

Try this:

Html.toHtml(editText.getText().toString());

Hope this will get you the desired text.