TextView with spans , how can I know which one is clicked on?

Question

I am using this library, but from the onClick styles that they have, neither handles my needed case. https://github.com/splitwise/TokenAutoComplete

So I wanted to do my own. So I have a ContactsCompletionView, which is a TextView. and I override the onTouchEvent like this:

override fun onTouchEvent(event: MotionEvent): Boolean {
    val action = event.actionMasked
    val text = text
    var handled = super.onTouchEvent(event)
    if (isFocused && text != null && action == MotionEvent.ACTION_UP) {
        val offset = getOffsetForPosition(event.x, event.y)
        if (offset != -1) {
            var offseted = text.substring(offset, text.length)
            var indexLeft = offseted.indexOf("(") + 1
            var indexRight = offseted.indexOf(")")
            if (indexLeft > 0 && indexRight > indexLeft)
                Toast.makeText(context, offseted.substring(indexLeft, indexRight), Toast.LENGTH_SHORT).show()
        }
    }
    return handled
}

This is what they had, but I cannot use TokenImageSpan because it is a protected class:

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
    int action = event.getActionMasked();
    Editable text = getText();
    boolean handled = false;

    if (tokenClickStyle == TokenClickStyle.None) {
        handled = super.onTouchEvent(event);
    }

    if (isFocused() && text != null && lastLayout != null && action == MotionEvent.ACTION_UP) {

        int offset = getOffsetForPosition(event.getX(), event.getY());

        if (offset != -1) {
            TokenImageSpan[] links = text.getSpans(offset, offset, TokenImageSpan.class);

            if (links.length > 0) {
                links[0].onClick();
                handled = true;
            } else {
                //We didn't click on a token, so if any are selected, we should clear that
                clearSelections();
            }
        }
    }

    if (!handled && tokenClickStyle != TokenClickStyle.None) {
        handled = super.onTouchEvent(event);
    }
    return handled;

}

My code works, but my issue is that whenever I press an TAG at the end of it. It gets the next object. I assume that this is because I just use:

 val offset = getOffsetForPosition(event.x, event.y)
 if (offset != -1) {
     var offseted = text.substring(offset, text.length)
 }

When they use:

  if (offset != -1) {
      TokenImageSpan[] links = text.getSpans(offset, offset, TokenImageSpan.class);
  }

TokenImageSpan extends ImageSpan, so I can use it like that, But I do not know how to take the text from the ImageSpan. Any ideas how I can fix this please?

You can set a click listener on the span, and avoid all the touch event parsing — Lena Bru, Feb 19 '20 at 16:27
https://stackoverflow.com/a/13330012/2136812 explains how to do that — Lena Bru, Feb 19 '20 at 16:29

score 1 · Accepted Answer · answered Feb 19 '20 at 16:51

You can use clickable span as below:

SpannableString ss = new SpannableString("your string comes 
here");
ClickableSpan clickableSpan = new ClickableSpan() {
@Override
public void onClick(View textView) {
    //do your stuff here on click
}
@Override
public void updateDrawState(TextPaint ds) {
    super.updateDrawState(ds);
    ds.setUnderlineText(false);
}
};

//set click range
ss.setSpan(clickableSpan, 8, 15, 
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

//your text view or edittext
textView.setText(ss);  
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.TRANSPARENT);

I have accepted this, because this answer works for normal cases. Due to using a library with private/protected classes, was a bit harder, but will post my fix below — rosu alin, Feb 20 '20 at 09:40

score 0 · Answer 2 · answered Feb 20 '20 at 09:42

This is what I used:

  override fun onTouchEvent(event: MotionEvent): Boolean {
    val action = event.actionMasked
    val text = text
    var handled = super.onTouchEvent(event)
    var offset = getOffsetForPosition(event.getX(), event.getY())
    if (isFocused && text != null && action == MotionEvent.ACTION_UP) {
        var cursor = this@ContactsCompletionView.selectionEnd
        if (cursor < 0)
            cursor = 0
        val links: Array<ViewSpan> = text.getSpans(0, cursor, ViewSpan::class.java)
        if (objects.size > 0 && objects.size >= links.size && links.size > 0 && offset < cursor)
            Snackbar().make(this, objects[links.size - 1].address, com.google.android.material.snackbar.Snackbar.LENGTH_SHORT).show()

    }

    return handled
}

The library if ClickStyle is set to NONE, it moves the cursor at the end of the chosen object. So I create a substring of that, check how many spans I have, and then I use that as an index for my objects. in order to show the first one on the left of cursor

TextView with spans , how can I know which one is clicked on?

2 Answers2