How to handle onClick event on imageSpan in editText?

Question

i am working on an app in which user choose an image from gallery and it will be added in editText, now i want if user click on image in editText it should open in fullScreen, i used below code :-

public void addToEdt(Bitmap bitmap){
    SpannableString ss = new SpannableString("abc");
    Drawable d = new BitmapDrawable(getResources(), bitmap);
    d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    ss.setSpan(span, 0, 3, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    edt_note.setTransformationMethod(null);
    edt_note.getText().insert(edt_note.getSelectionStart(), ss);

    final int start = ss.getSpanStart(span);
    final int end = ss.getSpanEnd(span);

    ClickableSpan click_span = new ClickableSpan() {
        @Override
        public void onClick(View widget) {
                   Toast.makeText(getApplicationContext(),"Clicked",Toast.LENGTH_LONG).show();
        }
    };

    ClickableSpan[] click_spans = ss.getSpans(start, end,  ClickableSpan.class);

    if(click_spans.length != 0) {
        // remove all click spans
        for (ClickableSpan c_span : click_spans) {
            ss.removeSpan(c_span);
        }
    }

    ss.setSpan(click_span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

tried above code but its not listening onClick event, now, how can i listen click event on this image and do further task?

Answer 1

Clickable Span at the same start and end locations of the editText.

sb.setSpan(cs, imageStartSpan,imageEndSpan , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Also

editText.setMovementMethod(LinkMovementMethod.getInstance());

I cannot write the whole code for you. Try the below sample:-

public void addToEdt(Bitmap bitmap){
    SpannableString ss = new SpannableString();
    Drawable d = new BitmapDrawable(getResources(), bitmap);
    d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
    ss.append("abc"); // Append the text here
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    ss.setSpan(span, 0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // start(0) and end (2) will create an image span over abc text
    ss.setSpan(new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    ss.delete(0, 2);
                    editText.setText(ss);
                }
            },0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // this will add a clickable span and on click will delete the span and text
    editText.setText(ss); // this will show your image/clickable span in edittext
}


editText.setMovementMethod(LinkMovementMethod.getInstance());

Answer 2

I did not find using ClickableSpan and setMovementMethod to be acceptable given the problems it causes. I do not believe these were intended to be used in EditText control.

Also, I need to know WHERE the user clicked in the span. My image span has an X close button at the right side and I want to know if the user clicked on the X as opposed to just clicking on the label.

So I found another way:

• Subclass ImageSpan and override the draw method to just call the super, but also to store the x/y/left/top in member variables - so, now you know where the span is positioned inside the EditText.
• Subclass EditText and handle onTouchEvent to just call the super, but also get your spans and hit test each one to find out if the user tapped on the span (or a part of the span).

That's it, this method works with no side effects.

Answer 3

Try

final int start = ss.getSpanStart(span);
final int end = ss.getSpanEnd(span);

ClickableSpan click_span = new ClickableSpan() {
    @Override
    public void onClick(View widget) {

    }
};

ClickableSpan[] click_spans = ss.getSpans(start, end, ClickableSpan.class);

if(click_spans.length != 0) {
    // remove all click spans
    for (ClickableSpan c_span : click_spans) {
        ss.removeSpan(c_span);
    }
}

ss.setSpan(click_span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Also add this:

yourEditText.setMovementMethod(LinkMovementMethod.getInstance());

Answer 4

I found another solution that is less intrusive than going with LinkMovementMethod. Instead, I simply extended ArrowKeyMovementMethod (the default movement method for EditText) and added some of the code from LinkMovementMethod that is used to determine the span that was clicked. In my case I looked for an ImageSpan and then deleted the text that span covered (so a click removes the image):

private class SpanDeletingMovementMethod : ArrowKeyMovementMethod() {
    override fun onTouchEvent(
        widget: TextView,
        buffer: Spannable,
        event: MotionEvent
    ): Boolean {
        if (event.action == MotionEvent.ACTION_DOWN) {
            var x = event.x.toInt()
            var y = event.y.toInt()
            x -= widget.totalPaddingLeft
            y -= widget.totalPaddingTop
            x += widget.scrollX
            y += widget.scrollY
            val layout = widget.layout
            val line = layout.getLineForVertical(y)
            val off = layout.getOffsetForHorizontal(line, x.toFloat())

            val committedTags = buffer.getSpans<ImageSpan>(off, off)
            if (committedTags.isNotEmpty()) {
                val tag = committedTags[0]
                (buffer as Editable).replace(buffer.getSpanStart(tag), buffer.getSpanEnd(tag), "")
                return true
            }
        }

        return super.onTouchEvent(widget, buffer, event)
    }
}

simply set this movement method on the EditText (or override getDefaultMovementMethod), and you can handle span clicks.