Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

EditText + ImageSpan disappearing when carry over to next line

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: Before the issue

after I finish typing "not working." the edit text appears like so: After issue is produce

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.

like image 481
rosenthal Avatar asked Jan 14 '17 23:01

rosenthal


1 Answers

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

like image 123
Guillermo Cuesta Avatar answered Nov 20 '22 07:11

Guillermo Cuesta