EditText + ImageSpan disappearing when carry over to next line

Question

I'm using a custom EditText class that supports input of image spans via user input for a particular widget, and experiencing a strange issue. When the image span appears at the end of a a line, the carry over to the next line sometimes causes the image span to no longer be visible.

i.e before:

after I finish typing "not working." the edit text appears like so:

Basically, it appears the image span isn't properly handled by the edittext when it comes to moving it to the next line in a multi-line edittext. It is just invisible to the user after being carried over. I can backspace the second image's content until it looks exactly like the first image (to the "n") and we see the image span again.

Anyone know what I can do to solve this? It's a critical component I'd like to keep in my application. I also can't fallback to a single line edit text, the multiline support is also critical.

For reproducibility, here is my code for adding the ImageSpan to my edit text:

public void appendSpannedText(String s){
    if (textToDrawableMap == null || textToDrawableMap.isEmpty()
            || !textToDrawableMap.containsKey(s)) {
        return;
    }

    // Acquire the mapped drawable
    Drawable drawable = textToDrawableMap.get(s);

    Editable editable = getText();
    int start = getSelectionStart();

    // Insert the a space at the start that's eaten by the image span
    // being set.
    editable = editable.insert(start, SPACE);

    // Insert the new string at the starting point
    SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(editable);

    // Create the span and set the new span to the appropriate range
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);

    int nextIdx = start + 1;
    spannableStringBuilder.setSpan(span,
            start, nextIdx,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    // Update the spanned text and the cursor
    setText(spannableStringBuilder);
    setSelection(nextIdx);
}

I just have a few icons that a user can press and it insert's the image span to the custom edit text via spannable. I use a mapping of text -> drawables that I support so I know which one to use when a user presses a particular button. The main thing is if you have an imagespan in the edittext, it can become invisible on new line when triggered.

Answer 1

I was having the same problem with the EditText.

As a previous comment says, this happens because of the space character. When the EditText turns into a new line, the component removes the last character of the previous line, if this is a space. So, to avoid this to happen, we have to use a different one.

In the previous code we had this:

 editable = editable.insert(start, SPACE);

Instead of this, we should write the next code:

editable = editable.insert(start, anyCharacter);

Where anyCharacter is a character different of " ".